Highlight Text Within A Specific Element - Highlighter

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.

  • Publication date: 16.10.2018
  • Source