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-- IfwordsOnlyis set totrue, this is used to determine these boundaries, defaults to\\b(word boundary).wordsBoundaryStart-- IfwordsOnlyis set totrue, this is used to determine prefix word boundaries, defaults to the value ofwordsBoundary.wordsBoundaryEnd-- IfwordsOnlyis 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
4 May 3, 2022
14 Jan 3, 2023
67 Dec 24, 2022
2 Apr 11, 2022
61 Jan 3, 2023
7 Dec 16, 2022
4 Jun 9, 2022
11 Jan 3, 2023
20 Oct 30, 2022
585 Dec 21, 2022
12 Oct 10, 2022
1.1k Nov 26, 2022
15 Dec 30, 2022
72 Dec 24, 2022
10 Aug 22, 2022
1 Aug 10, 2022
2 Nov 7, 2021
1.6k Dec 31, 2022
1 Aug 22, 2022