Skip to content
A Bower wrapper for @bartaz modification to the jQuery Term Highlighting plugin.
JavaScript HTML
Branch: master
Clone or download
jaberu and knownasilya fix(ie11): normalize does not merge the splitted text. (#16)
* IE11: normalize does not merge the splitted text.

* fix indent

* Revert "feat: add support to ignore diacritics"

This reverts commit d157490
Latest commit 16712f0 Jul 26, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.gitattributes initial commit. Jul 25, 2013
.gitignore
.prettierrc.yml chore: formatting code with prettier Jan 28, 2019
CHANGELOG.md chore(release): 3.5.0 Jan 28, 2019
README.md docs: Fix headings and add toc Mar 12, 2017
bower.json chore(release): 3.5.0 Jan 28, 2019
component.json v3.2.2, add package.json, fixup docs and code cleanup Sep 16, 2014
jquery.highlight.js fix(ie11): normalize does not merge the splitted text. (#16) Jul 26, 2019
package-lock.json fix(deps): bump handlebars from 4.0.12 to 4.1.2 (#18) Jul 26, 2019
package.json chore(release): 3.5.0 Jan 28, 2019

README.md

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 to false.
  • wordsOnly -- If we want to highlight partial sections of a word, e.g. 'ca' from 'cat', defaults to false.
  • wordsBoundary -- If wordsOnly is set to true, this is used to determine these boundaries, defaults to \\b (word boundary).
  • wordsBoundaryStart -- If wordsOnly is set to true, this is used to determine prefix word boundaries, defaults to the value of wordsBoundary.
  • wordsBoundaryEnd -- If wordsOnly is set to true, this is used to determine suffix word boundaries, defaults to the value of wordsBoundary.

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

You can’t perform that action at this time.