react-string-replace
react-string-replace copied to clipboard
iansinnott
Consider supporting the full String.prototype.replace API
Not sure how big a lift this would be, but something to think about.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
@iansinnott, I think, in order to have the API as below, the index would need to go and would introduce a breaking change to current react-string-replace API. I assume the index is only needed for key on multi component rendering and needs to be unique. So we could reuse the offset for that, which is unique. I am just still trying to understand what is the relationship between offset <> pN
function replacer(match, p1, p2, p3, offset, string) {
// p1 is nondigits, p2 digits, and p3 non-alphanumerics
return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
Yeah, looking at the docs the string replace API seems a bit odd. I initially want with index for the reason you said, and simply because it's familiar.
Since offset is unique it does seem that we could make due without index. I like the idea of supporting the standard API but I also don't have a need for it. Open to discussion
@iansinnott, I think I grok it now. And I actually found a use-case in my application.
The use case is basically this:
- in the provided text, I want to highlight the candidate strings (eg: words) for manipulation with one regex
- in the same text, I need to highlight the manipulated strings (eg: fields in handlebar enclosures {{field.name}})
Now, I can provide a grouped regex for matching the two character groups eg: \{\{(.+?)\}\}|([^\s\n\.\,]{2,}), take the p1, p2 parts and return them with desired tags to the result array.
@iansinnott I did not modify the server <> client example, since I do not understand how you deploy this on local... I suppose the code needs bundling first. There is no script in the package.json file, so babel-node does not load the app for me.
I have added a bit more information to readme, but I think I am making it a bit cluttered with former examples.
Having support for this would be really great. I'm currently trying to transform /<h1( id="([a-z-]+)")?>(.*)<\/h1>/g into <Header1 key={i} id={match[1]}>match[1]</Header1>, but can't with this library.
