react-string-replace icon indicating copy to clipboard operation
react-string-replace copied to clipboard

Capture groups?

Open sportshead opened this issue 5 years ago • 4 comments

Can you add support for multiple regex capture groups?

sportshead avatar Apr 07 '20 05:04 sportshead

Do you have an example regex?

This library depends on the functionality of String.prototype.split which will place matched characters in odd-numbered elements of a split array:

'hey you there'.split(/( )/); // => [ 'hey', ' ', 'you', ' ', 'there' ]

iansinnott avatar Apr 21 '20 10:04 iansinnott

Can you add support for multiple regex capture groups?

With a bit of a workaround you could the the matcher do the logic. The caveat being that the matcher regex, cannot be the same as the "parser" regex, reason being that str.split splits on capture group.

const md = `
[Test](https://google.com)
`;

// Pay attention to where the matcher and parser group diffs
reactStringReplace(md, /(\[.*?\]\(.*?\))/gi, (match, index) => {
  match.match(/\[(.*?)\]\((.*?)\)/gi);

  return <a href={RegExp.$2}>{RegExp.$1}</a>
});

hejrobin avatar Dec 01 '20 10:12 hejrobin

Speaking of, is there any legitimate way to render html containing markdown? I'm using react-string-replace to highlight some text in a string, but now I've been asked to also render any markdown contained in the string. The way I reeive the data means that the highlight-replacement must operate on the string, so I have to do that part first. If the original string contained markup, I'm left with something like the following (in array form, of course)

This is <span className="yellow">highlighted</span> text but it has some ## markup as well

If it was a raw string, I could just use react-markdown or similar lib, but obviously that's not an option after the first transform.

Any ideas? Even if it means combining with a different package? Btw thanks so much, this library is awesome

oneillsp96 avatar Jan 08 '21 18:01 oneillsp96

Do you have an example regex?

This library depends on the functionality of String.prototype.split which will place matched characters in odd-numbered elements of a split array:

'hey you there'.split(/( )/); // => [ 'hey', ' ', 'you', ' ', 'there' ]

Here the example:

"<h1>Lorem <strong>Ipsum</strong> <strong>Dolor</strong></h1>".replace( /(^|<\/?[^>]+>|\s+)([^\s<]+)/g, '$1<span>$2</span>' )

federicocappellotto97 avatar Mar 09 '23 10:03 federicocappellotto97