Comments (11)
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. 😄
from react-highlight-words.
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]
.
from react-highlight-words.
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.
from react-highlight-words.
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".
from react-highlight-words.
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. :)
from react-highlight-words.
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.
from react-highlight-words.
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.
from react-highlight-words.
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.
from react-highlight-words.
: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.
from react-highlight-words.
Closed due to inactivity.
from react-highlight-words.
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.
from react-highlight-words.
Related Issues (20)
- I am unable to display html text in highlighter. HOT 4
- Highlight only entire words instead of partial words HOT 1
- What if we need the text to be a paragraph tag instead of a span tag? HOT 1
- Is it not possible to utilize multiple highlight colors? HOT 1
- Access active element HOT 4
- Certain specific characters cause a null substring issue. HOT 1
- searchWords.filter is not a function HOT 1
- Crashes when adding [ or \ characters to search string HOT 2
- react-highlight-words getting crash on some special symbols HOT 1
- Add motivation of package HOT 3
- Passing additional information to findChunks HOT 1
- module not working in Nextjs 14 HOT 7
- Can I only match one time ? HOT 1
- How to get index? HOT 1
- dist is very large HOT 3
- Cannot use import statement in my TypeScript project HOT 6
- Problems with React 16
- Making some words in the text bold HOT 1
- Versioning
- How to combine with react-markdown? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-highlight-words.