jQuery Plugin To Highlight Searched Text In A Certain Container - highlight.js
File Size: | 5.59 KB |
---|---|
Views Total: | 12809 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another text highlighting plugin that highlights matched text/words with custom styles in a specific container. useful in your search result page to highlight user searched terms.
How to use it:
1. Include the latest jQuery library and jQuery highlight.js script on the webpage.
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> <script src="js/jQuery.highlight.js"></script>
2. The example JavaScript to highlight the text 'hello' within the container '#selector'.
$('#selector').highlight('hello');
3. Restrict the plugin to highlight the whole word instead of matched text.
$('#selector').highlight('hello',{ wholeWord: true // or false });
4. Determine whether to ignore the case of the specified text/word.
$('#selector').highlight('hello',{ ignoreCase: true // or false });
5. Change the default styles of the highlighted text/word.
$('#selector').highlight('hello',{ background: "#ffff00", color: "#000", bold: false, });
6. Add an extra CSS class to the highlighted text/word.
$('#selector').highlight('hello',{ class: "custom-class" });
This awesome jQuery plugin is developed by itay-grudev. For more Advanced Usages, please check the demo page or visit the official website.