10 jQuery Text Highlighter Plugins

Share

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.

Website
Source code

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.

Website
Source code

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.

Website
Source code

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.

Website
Source code

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.

Source code

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.

Source code

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.

Source code

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.

Source code

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.

Website
Source code

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.

Website
Source code

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!

Frequently Asked Questions about jQuery Text Highlighter Plugins

How do I install a jQuery text highlighter plugin?

Installing a jQuery text highlighter plugin is a straightforward process. First, you need to download the plugin from the official website or a trusted source. Once downloaded, extract the files and include the JavaScript file in your HTML document. You can do this by adding a script tag in the head section of your HTML document. The script tag should point to the location of the JavaScript file in your project directory. Once the plugin is included in your HTML document, you can initialize it by calling the plugin’s function in your JavaScript code.

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.

Can I use jQuery text highlighter plugins with other JavaScript libraries?

Yes, jQuery text highlighter plugins can generally be used with other JavaScript libraries. However, you should be aware of potential conflicts between jQuery and other libraries, especially those that also use the $ symbol. To avoid conflicts, you can use jQuery’s noConflict method to release control of the $ symbol.

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.