jQuery.Highlight.js
Text highlighting plugin for jQuery.
Original code and documentation.
Install
How to use this plugin.
Note: This plugin requires jQuery to be included, which is left up to you.
First you need to install the module, which can be installed in one of the following ways:
npm install jquery-highlight bower install jquery-highlight component install knownasilya/jquery-highlight # or just download it from Github
API
$.highlight
Function signature: highlight(word, options, callback)
The parameters are:
word string|array
(required)
string such as "lorem"
or "lorem ipsum"
or an array of string such as ["lorem", "ipsum"]
options object
(optional)
object with the following available options
className
-- The CSS class of a highlighted element, defaults to 'highlight'.element
-- The element that wraps the highlighted word, defaults to 'span'.caseSensitive
-- If the search should be case sensitive, defaults tofalse
.wordsOnly
-- If we want to highlight partial sections of a word, e.g. 'ca' from 'cat', defaults tofalse
.wordsBoundary
-- IfwordsOnly
is set totrue
, this is used to determine these boundaries, defaults to\\b
(word boundary).wordsBoundaryStart
-- IfwordsOnly
is set totrue
, this is used to determine prefix word boundaries, defaults to the value ofwordsBoundary
.wordsBoundaryEnd
-- IfwordsOnly
is set totrue
, this is used to determine suffix word boundaries, defaults to the value ofwordsBoundary
.
callback function
(optional)
function that will be called for each DOM node/element highlighted
$.unhighlight
Function signature: unhighlight(options)
:
The parameters are:
options object
(optional)
object with the following available options
className
-- The highlights to remove based on CSS class, defaults to 'highlight'.element
-- The highlights to remove based on HTML element, defaults to 'span'.
Examples
Below are several ways that you can utilize this plugin.
// wrap every occurrence of text 'lorem' in content // with <span class='highlight'> (default options) $('#content').highlight('lorem'); // search for and highlight more terms at once // so you can save some time on traversing DOM $('#content').highlight(['lorem', 'ipsum']); $('#content').highlight('lorem ipsum'); // wrap every occurrence of text 'lorem' in content // with <span class='highlight'> (default options) // log every word highlighted to the console using the invoked callback $('#content').highlight('lorem', {}, function(el) { console.log('highligting DOM element', el) }); // search only for entire word 'lorem' $('#content').highlight('lorem', { wordsOnly: true }); // search only for the entire word 'C#' // and make sure that the word boundary can also // be a 'non-word' character, as well as a regex latin1 only boundary: $('#content').highlight('C#', { wordsOnly: true, wordsBoundary: '[\\b\\W]' }); // search only for the entire word 'C++' // and make sure that the word boundary can also // be a 'non-word' character, as well as a regex latin1 only boundary: $('#content').highlight('C++', { wordsOnly: true, wordsBoundaryEnd: '\\W*\\b' }); // don't ignore case during search of term 'lorem' $('#content').highlight('lorem', { caseSensitive: true }); // wrap every occurrance of term 'ipsum' in content // with <em class='important'> $('#content').highlight('ipsum', { element: 'em', className: 'important' }); // remove default highlight $('#content').unhighlight(); // remove custom highlight $('#content').unhighlight({ element: 'em', className: 'important' });
Attribution
Plugin was originally created by Bartek Szopka (@bartaz).
License
MIT