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.
Continue reading %10 jQuery Text Highlighter Plugins%
LEAVE A REPLY
You must be logged in to post a comment.