10 jQuery Text Highlighter Plugins
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.
1. mark.js
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).
See the Pen mark.js demo by SitePoint (@SitePoint) on CodePen.
2. highlight
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).
See the Pen highlight demo by SitePoint (@SitePoint) on CodePen.
3. jquery.highlight
A fork of highlight (#2 above) that adds the base options to specify a custom element and class name as well as an option caseSensitive and 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.
See the Pen jquery.highlight demo by SitePoint (@SitePoint) on CodePen.
4. jQuery.highlightRegex
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.
See the Pen jQuery.highlightRegex demo by SitePoint (@SitePoint) on CodePen.
5. highlight_words
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.
See the Pen highlight_words demo by SitePoint (@SitePoint) on CodePen.
6. jcOnPageFilter
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.
See the Pen jcOnPageFilter demo by SitePoint (@SitePoint) on CodePen.
7. SearchHighlight
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.
See the Pen SearchHighlight demo by SitePoint (@SitePoint) on CodePen.
8. jquery-highlighter
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.
See the Pen jquery-highlighter demo by SitePoint (@SitePoint) on CodePen.
9. TextHighlighter
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.
See the Pen TextHighlighter demo by SitePoint (@SitePoint) on CodePen.
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.
See the Pen jQuery highlightTextarea demo by SitePoint (@SitePoint) on CodePen.
Conclusion
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!
