This popular article was updated in May, 2016, to reflect the current state of text highlighter plugins.
Many applications or websites provide a way for users to search for specific terms. To make this process faster, offer a great user experience, and generally help users find the content they’re searching for, you can highlight these search terms dynamically on the given page.
Here are 10 jQuery text highlighter plugins you can use to make this possible.
A keyword highlighter for search terms or custom regular expressions, written in ES6 and based on several dozen cross-browser unit tests as well as code quality monitoring. It’s been developed to cater for every use case, and includes all options from the text highlighter plugins below and more (e.g. diacritics, synonyms and iframes).
A very simple and tiny text highlighting plugin that laid the basis for many forks. Because it doesn’t allow any customization, its strength is the small file size (1.4 KB).
A fork of highlight (#2 above) that adds the base options to specify a custom element and class name as well as an option
wordsOnly. Unfortunately, this plugin is not maintained (last commit from 2010, no fork rebasing) and has disabled issues, so it should be used with caution.
Another plugin based on highlight (#2 above) to highlight custom regular expressions. Like jquery.highlight (#3 above), it offers the base options to specify a custom element and class name. Other options can be added manually to the custom regular expression — such as the “i”-flag to to ignore uppercase and lowercase.
A simple jQuery highlighting function without any customization options, just like in highlight (#2 above). You should be aware that it doesn’t offer a function to remove highlights, and doesn’t facilitate searching inside nested children. However, it does provide a good basis for further implementations — though it doesn’t contain licensing information.
This plugin allows you to filter a list with a search term and highlight found matches. It has an option to enable case sensitive searches, but doesn’t contain licensing information.
Another text highlighting plugin that offers you options to define a custom highlight class; a class suffix; an
exact option, for finding things such as exact matches and highlighting query parameters from search engines (which is mostly no longer possible).
The plugin was written in 2006, hasn’t been updated for a long time, and doesn’t contain licensing information, so you should be careful when using it.
This plugin allows you to animate self-wrapped text highlighting elements by implementing the necessary CSS animation settings for you. You can, of course, write the CSS yourself if you prefer.
With this plugin, you can highlight selected text with custom colors or just observe text selections by the user. As this plugin is not maintained anymore, you should enjoy it with caution.
10. jQuery highlightTextarea
As textarea elements can’t render HTML (like any of the above plugins will generate for matches), this plugin allows you to highlight text inside textarea elements. It offers options like
caseSensitive as well as
color, and was built upon some unit tests, but there are lots of open issues, and it doesn’t provide a highlight removal function.
Well, that’s my current top ten list of jQuery text highlighter plugins. If you’ve had any experience with these (good or bad!), or if you know of other text highlighter plugins worth mentioning, please let us know in the comments!
Julian is a passionate software developer currently focusing on frontend technologies and loves open source.
Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja