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

--ADVERTISEMENT--

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).

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.

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.

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.

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.

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.

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!

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.