Highlight Text Within A Specific Element - Highlighter

File Size: 13.4 KB
Views Total: 2165
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Highlight Text Within A Specific Element - Highlighter

A small and easy-to-use jQuery based text highlighter used to highlight arbitrary text within a specified container.

Useful for highlighting the search keyword within a larger body of text when searching the article on the client side.

More features:

  • Custom delay.
  • Case sensitive.
  • Diacritic sensitive
  • Word only mode.
  • Full text mode.

How to use it:

1. Insert the minified version of the jQuery highlighter plugin after jQuery.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
<script src="highlighter.min.js"></script>

2. Call the function on the target text container and specify the text to highlight.

<div class="text">
  long text here
  q: 'text-to-highlight'

3. Apply your own CSS styles to the highlighted text.

.highlight {
  /* CSS Styles Here */

4. Done. Adanced usages:


  // delay in milliseconds
  delay : false,

  // easing function
  easing: false,

  // default class
  className : 'highlight',

  // default wrapper
  element : 'span',

  // case sensitive
  caseSensitive : false,   

  // diacritic sensitive 
  diacriticSensitive : false,   

  // words only mode
  wordsOnly : false,

  // full text mode
  fullText : false,

  // min length
  minLength : false

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