Highlight Characters & Words Within The DOM - highlight.js

File Size: 7.92 KB
Views Total: 1462
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Highlight Characters & Words Within The DOM - highlight.js

highlight.js is a simple yet configurable jQuery keyword highlighting plugin which can be used to highlight any characters or the whole words within a large body of text.

You can customize the styles of the highlighted characters/words. Ignore case is supported as well.

How to use it:

1. Download and include the highlight.js script after loading jQuery JavaScript library (slim build).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
<script src="js/jQuery.highlight.js"></script>

2. Initialize the plugin on the text container and specify the keyword you want to highlight.

<div class="container">
  Your Long Text Here

3. Override the default styles of the highlighted keyword.


  // background color
  background: "#ffff00",

  // text color
  color: "#000",

  // is bold?
  bold: false


4. Decide whether to ignore case.

  // default: true
  ignoreCase: false 

5. Decide whether to highlight the whole word.

  // default: true
  wholeWord: false

6. You can also add an extra CSS class to the highlighted keyword.

  class: "your class here"



  • JS improved

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