Add motivation of package

[stephan-noel]

I was looking into this problem and trying to figure out why this is a complicated problem and has motivated other packages. First I saw the core library mentioned in reach ui's combobox, and then I dug up Sophie's solution (copied below):

var parts = "I am a cow; cows say moo. MOOOOO.".split(/(\bmoo+\b)/gi);
for (var i = 1; i < parts.length; i += 2) {
  parts[i] = <span className="match" key={i}>{parts[i]}</span>;
}
return <div>{parts}</div>;

I saw that the behavior described by Sophie seems to be guaranteed and mentioned here in the MDN docs.

I'm trying to get some clarity on this problem and if there are some edge cases with Sophie's solution which aren't being addressed and why this has led to so many different attempts (see comments after Sophie's) to do this. I think this would be helpful for others to know as well and I'd be happy to add this information to the project README to increase visibility if you agree.

[sergei-startsev]

@stephan-noel if you have some specific cases you'd like to list in the motivation section, I'd be happy to review them.

[stephan-noel]

@sergei-startsev thank you for that. That's my problem though, I don't know when I should use this library or highlight-words-core, and when something simple like the following is good enough:

var parts = "I am a cow; cows say moo. MOOOOO.".split(/(\bmoo+\b)/gi);
for (var i = 1; i < parts.length; i += 2) {
  parts[i] = <span className="match" key={i}>{parts[i]}</span>;
}
return <div>{parts}</div>;

I looked through the code of the core and it's way more complicated than this.. So I'm not sure when I need this more complicated approach and why.

[sergei-startsev]

You can start with the list of supported properties to better understand possible use/edge cases. If you're happy with the solution above, you don't need anything else.