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" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<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
</div>

$('.container').highlight('keyword');

3. Override the default styles of the highlighted keyword.

$('.container').highlight('keyword',{

  // background color
  background: "#ffff00",

  // text color
  color: "#000",

  // is bold?
  bold: false

});

4. Decide whether to ignore case.

$('.container').highlight('keyword',{
  // default: true
  ignoreCase: false 
});

5. Decide whether to highlight the whole word.

$('.container').highlight('keyword',{
  // default: true
  wholeWord: false
});

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

$('.container').highlight('keyword',{
  class: "your class here"
});

Changelog:

2020-02-10

• JS improved

---

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