Fast Word Highlighting Plugin - jQuery.Highlight.js

File Size: 29.7 KB
Views Total: 5150
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Fast Word Highlighting Plugin - jQuery.Highlight.js

Highlight.js is a small, customizable, performant text highlighter that applies custom styles and HTML tags to matched strings or words inside a specific container.

Key features:

  • Allows to highlight only entire words.
  • Case sensitive.
  • Easy to customize the styles of the highlighted strings.

How to use it:

1. Add the jQuery highlight.js plugin after jQuery library.

<script src="" 
<script src="jquery.highlight.js"></script>

2. The JavaScript to highlight all the matched text within a specified container or the whole page.



3. Apply your own styles to the highlighted text.

.highlight {
  background: #000;
  color: #fff;
  /* more styles here */

4. You can also highlight multiple strings at a time.

$('body').highlight('text1 text2');
// or
$('body').highlight(['text1', 'text2']);

5. Enable/disable case sensitive.

  caseSensitive: true // default false

6. Decide whether to highlight only entire words.

  wordsOnly: true // default false

7. Set the word boundary.

  wordsBoundary: '\\b'

8. Specify the highlight element tag and class name.

  className: 'highlight',
  element: 'span'

9. Determine whether to ignore diacritics.

  ignoreDiacritics: false

10. Output all the highlighted text using the callback function.

$('.container').highlight('text-to-highlight', {
  // options here
}, function(el) {
  console.log('Highlighted: ', el)

11. Remove default highlight.



v3.5.0 (2021-08-13)

  • Add support to ignore diacritics
  • Update dependencies
  • fix(ie11): normalize does not merge the splitted text.

This awesome jQuery plugin is developed by knownasilya. For more Advanced Usages, please check the demo page or visit the official website.