There’s a nice jQuery highlight plugin by Johann Burkard. The only problem I had with it was the missing lenient mode. The pattern matching is case-insensitive but not lenient. Enter, my own jQuery highlight plugin that supports lenient mode. Lenient for me means that if you ask the plugin to highlight “selection” it will highlight “selection” as well as “séléction”, “SÉLÉCTION” and all other accented variations of each character.
This is perfect to display search results obviously. To see it in action try the demo below or use this blog’s search field at the top of this page.
Well then, here it is: the first lenient jQuery highlight plugin!
Demo
Click the buttons below to see what is highlighted:
Usage
Add the plugin
Note that this a jQuery plugin. Hence, you must first download and include jQuery in your HTML page(s). Then you download this highlight plugin and add it to your HTML page after jQuery. You can download either the regular jquery-highlight.js (8.3KB) or the YUI compressed version (5.2KB).
Define the CSS class
Create an entry in your style sheet for the highlight class.
1 | .highlight { background-color: yellow; } |
Highlight terms
Call the highlight function with the text to highlight. To highlight all occurrences of “foo” (case-insensitive) in all li elements, use this:
1 | $("li").highlight("foo", false); |
To highlight all occurrences of “selection” case- and accent-insensitive (i.e. lenient) in all li elements use this:
1 | $("li").highlight("selection", true); |
Remove highlighting
The highlight can be removed from any element with the removeHighlight function. In this example all highlights under the element with the ID content are removed.
1 | $("#content").removeHighlight(); |
Let me know how you like it!
Hello very nice plugin 😉
but i have a question
how to add class to a parent of span.highlight
exemple add class to the li
ul li div span.highlight
Not sure I fully understand. However, I assume you’re looking for something a “CSS parent selector”. Consider the following two resources in case I’m right: http://stackoverflow.com/q/1014861/131929, http://css-tricks.com/parent-selectors-in-css/
Thank you so much for nice working.
But I have a problem, I must highlight my search page with my country language, Vietnamese, and some special character is not highlighted, for example: ‘Nội’ will not be highlighted if I search for keyword ‘noi’.
Can you guide me to build a ‘charToAccentedCharClassMap’ variable for me, because I’m just beginner in jquery, I cannot understand what content of that variable represents. Thank you again.
I might be able to help you if you post the link to your site and tell me how to reproduce the problem.
Hello, I implemented it in u5CMS http://yuba.ch/u5cms/ and it works very well. Thank you!
Thank’s for your script, very helpfully !!
This becomes unstable when the result set it operates on becomes big. I am using it to highlight search result of almost 50 results and browser stops responding (IE8 and Firefox both)
Interesting, thanks for reporting. Do you have a public URL to demonstrate the behavior?
Marcel,
I currently do not have a public URL, but I will try to reproduce this scenario and send you the link.
Thanks!
Hi Marcel,
There is an problem to highlight an word when the html has some special chars like
"­"(Soft hyphen);example:
“Os ser­viços do Pla­no 1 da Assis­tência …
I found an solution, but would like to know your opinion about this problem;
at line 34
url with behavior: https://jsfiddle.net/ramseswd/sshzneqp/
thanks
I think I vaguely understand what the problem is. Unfortunately the JSFiddle link you posted shows no code, is it maybe private instead of public?
sorry, the new link
http://jsfiddle.net/ramseswd/ft4dq27h/4/
Ok, I get it. Your solution is ok but to be a bit more generically applicable I’d replace all HTML entities in the string instead of just the soft hyphen.
https://regex101.com/r/zC6gF7/1
I’m thinking about building such an option into my library in the future.
Thanks Marcel,
this generic regexp solution is much better, but i discovered that i have to keep (soft hyphens) and the highlight, and with my solution i remove all soft hyphens definitely… I’ll keep trying here with your regexp;
thanks again
I am watching that it also highlighting within words also…
For eg, if there is two words “highlight” and “falsehighlight”
in this case it is highlighting both.
Is there any way to highlight only words which begin with it?
That’s intentional. If you need that feature you need to modify the code of this library.
@Anirudh jquery.mark has that feature implemented: https://github.com/julmot/jquery.mark
@Marcel Stör, this plugin also started as a fork like yours.
https://github.com/julmot/jquery.mark
However, it has implemented several further options. And the most important: It includes tests!