Handling more complicated searchWord / matches scenarios (regex)

[jnachtigall]

I have a few requirements that are hard to meet knowing:

• Match only at the beginning of a word
  • Problem: js regex implementation of \b (word boundary) only works with ASCII chars, so is not really suitable for most real languages. Possible solution would be to use XRegExp (a wrapper around the native js RegExp), but this is not part of react-highlight-words. And I do not know if you wanna do the buy-in of adding XRegExp
• I also need to highlight words after a hyphen, e.g. for searchWord=['Ma'] in Smith-Mayer the Ma should be highlighted. If it starts with -, but the - should not be part of match (not be highlighted).
  • Unfortunately, this is not possible with JS regex because it does not support look-behind and look-around regexes at all. Various other workarounds available on Stackoverflow, but they all require some JS fiddling....

So why am I writing this:

• I think when it comes to real languages other than english or when the requirements are more complicated it is hard to use the lib as it is.

Also, I am not sure on how to proceed here :)

Looking into the source, my proposal would be to allow the findChunks function to be overridden as a prop (like there is sanitize already). Especially, all the above problem could be moved into the using app's domain if these lines could be overridden using a prop or similar:

https://github.com/bvaughn/highlight-words-core/blob/7cbba8346e08a68cbba77e7ef2c7df65f7dd1422/src/utils.js#L83-L89

I might try to send a PL, but not sure what direction to take considering the alternatives.

[jnachtigall]

I think ideally, I could use https://www.npmjs.com/package/xregexp-lookbehind in my app which uses react-select plus react-highlight-words. So the question would be how to allow this freedom without imposing to everyone.

[bvaughn]

Hi. You're welcome to submit a PR that adds a support for findChunks as a prop if you'd like.

I'd want to avoid adding a new external dependency directly to this lib though! 😄

[jnachtigall]

Hi @bvaughn

I needed to also customize the core repo because in Highlighter.js only findAll but not findChunks is used. That's why there are two PRs now for this feature. It should be downwards compatible. If no customFindChunks is passed then simply the default findChunks is used.

I had some big trouble developing this because both projects have different (old) babel configs and then working with yarn link locally and then my missing knowledge ;)

And then I am also on Windows here, that's why I added cross-env. Otherwise the yarn build would fail on Windows shells. Here's why

I could not run the tests, something was broken with the phantomjs (again Windows I guess) but I tested locally with and without customFindChunks and it worked nicely.

[jnachtigall]

I managed to run the tests and added new tests to the core and this repo.

[bvaughn]

Left you some feedback!

[jnachtigall]

I'm closing now that the custom findChunks is available, and whatever one wants is possilbe now. Also I submitted a PR with an example #45

Thanks again! :)

[bvaughn]

Thank you.