
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.
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" });
This awesome jQuery plugin is developed by yjseo29. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 23.06.2018
- Source