Allow using an array of matches about react-string-replace HOT 8 CLOSED

Hm, couldn't you do this with regex? I.e. something like /(whats|your)/g.

reactStringReplace('whats your name', /(whats|your)/g, (match, i) => (
  <span>{match}</span>
));

from react-string-replace.

Update: This argument is wrong, it is totally possible to do this without using an array. I guess it comes down to convenience in my case.

Yes that would totally be possible, however, this prevents you from using the match argument to style, or add props to the replacing element. For example:

reactStringReplace('whats your name', ['whats', 'your'], (match, i) => (
  <span className={`${match}`}>{match}</span>
));

or more generalized:

reactStringReplace('whats your name', ['whats', 'your'], (match, i) => (
  <span props={someFunc(match)}>{match}</span>
));

This makes it much more powerful.

from react-string-replace.

In either case, match should still just be a string. How does using a regex prevent you from using the match to style?

from react-string-replace.

You're absolutely correct, it seems like the only advantage is to make the public API more friendly to those who aren't well versed in regular expressions (like me obviously :)).

(updated my comment above)

from react-string-replace.

Yup, that's a fair point. Regex is not a very friendly API to anyone :) I agree this might make it easer to use for some people, but I'm hesitant to add functionality that is not part of the standard String.prototype.replace API. It adds more complexity by be different than JS replace. See #6.

Maybe a readme example would help people learn how to use regex to match more than one string?

from react-string-replace.

Okay, so it seems that this is a way to turn an array of strings into a single regex:

new RegExp(`(${myArray.join('|')})`, 'gi')

Do you know of a cleaner way? Also, would this work with an array of regexes ?

Do you think it makes more sense to add this to the ReadMe, or could we add a built in one liner that transforms arrays into a regex?

from react-string-replace.

Yup, your right that you can turn a string into a regex like that. It works great but that's not why I'm reluctant to add the functionality to this library. Adding a new argument type makes the API more complex so the user has to be aware of the type of the argument in order to understand how the function will work. This is already the case with String vs RegExp, so adding a third type (Array) would mean more complexity for users. Also more code in the codebase means more places things can break.

But I understand that it might be much more useful to you if it supported arrays, so in that case I would recommend you wrap it in your own function that creates a regex from an array and passes it through:

// myReactStringReplace.js
import reactStringReplace from 'react-string-replace';

export default function myReactStringReplace(str, regex, replacer) {
  if (Array.isArray(regex)) regex = new RegExp(`(${regex.join('|')})`, 'gi');
  return reactStringReplace(str, regex, replacer);
}

from react-string-replace.

Perfect, solves the issue!

from react-string-replace.