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" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<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
</div>

$('.text').highlighter({
  q: 'text-to-highlight'
})

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

.highlight {
  /* CSS Styles Here */
}

4. Done. Adanced usages:

$('.text').highlighter({

  // 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.