search

bvaughn / react-highlight-words

React component to highlight words within a larger body of text
https://bvaughn.github.io/react-highlight-words/
MIT License
2.18k stars 171 forks source link

Support word boundaries #7

Closed peterbe closed 7 years ago

peterbe commented 8 years ago

When I use the demo and search for the word and it finds and highlights b<mark ...>and</mark>s.

Would be great with an option to make it NOT match unless the words is limited by a word delimiter. E.g. match and highlight <mark>and</mark>erson and the full word <mark>and</mark>.

bvaughn commented 8 years ago

Would be great with an option to make it NOT match unless the words is limited by a word delimiter.

I don't see how [and]erson is any more of a full word than b[and].

bvaughn commented 8 years ago

This component does case-insensitive string matching in the same way that browser text search does. It would be possible to add support for prefix strings only (like I think you're requesting) but it's not a feature I've needed.

peterbe commented 8 years ago

I don't see how [and]erson is any more of a full word than b[and].

I'd need for a search functionality. I display the results as the user types. Perhaps she's typed "and" in the midst of typing "anderson".

bvaughn commented 8 years ago

Sounds like you want to enforce prefix string matching.

This component isn't meant for that (currently). It just does simple sub-string matching (again, like the browser does when you search text).

If you'd be interested in contributing though, it probably wouldn't be too hard to add support for this. :)

peterbe commented 8 years ago

I might take a stab. Many years ago I wrote this function. If the text is "ian anderson is a band member" and the terms are ["and"] the outcome becomes "ian <b>anderson</b> is a band member".

That's quite nice when you're doing autocomplete because the back-end service will suggest "peter bengtsson", if the user has typed "ben".

See http://codepen.io/peterbe/pen/akXvJm?editors=0011#0

One neat feature of this is that if you have a stemmer to help, and the user types "searching" or "searches" it might find "searched" or "searcher". Quite fuzzy but potentially useful.

bvaughn commented 8 years ago

Right, right. This component isn't intended for filtering, just sub-string highlighting. But I could see the usefulness for configuring its highlights to more closely match whatever searching/filtering library you're using. I just don't have the time to add it at the moment. :D

Btw I have some other libs you may find interesting if you're into search/stemming/etc. 😄 js-search, js-worker-search, treasure-data/redux-search.

peterbe commented 8 years ago

Wow! That's really useful. I actually already got started with Elasticlunr.js. It was the best I could find when I did some googling. Now I definitely need to check out this js-search of yours. I like the idea of being able to stuff it in a web worker.

bvaughn commented 8 years ago

:D Thanks!

I'm using redux-search (which is built on top of js-worker-search) in a production application right now and it's working great. No lag at all, even when indexing and searching many thousands of records.

bvaughn commented 8 years ago

By the way, this is a regex-friendly component so you could always accomplish this via regex too. For example, to use your example above, instead of passing "and" you'd pass "\band".

It did not occur to me to point this out earlier. 😄

bvaughn commented 7 years ago

Closed due to inactivity.

danloiterton commented 7 years ago

I was looking for this functionality also. Thanks for pointing out the regex option! I had to escape the word boundary though - so "\\band", for example.