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!
Frequently Asked Questions about jQuery Text Highlighter Plugins
How do I install a jQuery text highlighter plugin?
Can I customize the highlight color in jQuery text highlighter plugins?
Yes, most jQuery text highlighter plugins allow you to customize the highlight color. This is usually done by passing an options object to the plugin’s function when initializing it. The options object can contain various properties that control the behavior of the plugin, including the highlight color. The property for setting the highlight color may vary between different plugins, so it’s important to check the plugin’s documentation for the correct property name and value format.
Are jQuery text highlighter plugins compatible with all browsers?
Most jQuery text highlighter plugins are designed to be compatible with all modern web browsers, including Chrome, Firefox, Safari, and Edge. However, compatibility with older browsers, such as Internet Explorer, may vary between different plugins. It’s always a good idea to check the plugin’s documentation or ask the developer if you need to support a specific browser.
Can I use multiple jQuery text highlighter plugins on the same page?
While it’s technically possible to use multiple jQuery text highlighter plugins on the same page, it’s generally not recommended. Using multiple plugins can lead to conflicts and unexpected behavior, especially if the plugins are not designed to work together. If you need to highlight text in different ways on the same page, consider using a single, versatile plugin that supports multiple highlighting styles.
How do I remove highlights from text using a jQuery text highlighter plugin?
Most jQuery text highlighter plugins provide a function to remove highlights from text. This function is usually called on the same element that the highlights were applied to, and it removes all highlights within that element. The exact method for removing highlights may vary between different plugins, so it’s important to check the plugin’s documentation for the correct usage.
Can I highlight text dynamically with jQuery text highlighter plugins?
Yes, most jQuery text highlighter plugins support dynamic highlighting. This means you can highlight text in response to user actions, such as clicking a button or typing in a search box. To do this, you would call the plugin’s function in the event handler for the user action, passing in the text to be highlighted.
Are jQuery text highlighter plugins accessible to screen readers?
Accessibility can vary between different jQuery text highlighter plugins. Some plugins may use HTML and CSS techniques that are accessible to screen readers, while others may not. If accessibility is a concern for your project, it’s important to check the plugin’s documentation or ask the developer about its accessibility features.
Do jQuery text highlighter plugins affect page performance?
The impact of jQuery text highlighter plugins on page performance can vary depending on the plugin and how it’s used. However, most plugins are designed to be lightweight and have minimal impact on performance. If you’re concerned about performance, consider using a plugin that allows you to control when and how text is highlighted, so you can optimize for performance.
Can I use jQuery text highlighter plugins on mobile devices?
Most jQuery text highlighter plugins are designed to work on both desktop and mobile devices. However, the behavior and appearance of the highlights may vary between different devices and screen sizes. It’s always a good idea to test the plugin on various devices to ensure it works as expected.