Quick Word Highlight Plugin | jQuery.Highlight.js

jQuery.Highlight.js is a small, customizable, high-performance text highlighter that applies custom styles and HTML tags to matching strings or words within a given container.

Bower’s bartaz mod wrap on jQuery Term Highlighting plugin.

How to make use of it:

1. Add the jQuery highlight.js plugin after the jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script src="jquery.highlight.js"></script>

2. The JavaScript to focus on all of the matched textual content inside a specified container or the whole web page.

$('.container').highlight('text-to-highlight');

$('body').highlight('text-to-highlight');

3. Apply your personal types to the highlighted text.

.highlight {
  background: #000;
  color: #fff;
  /* more styles here */
}

4. You may also spotlight a number of strings at a time.

$('body').highlight('text1 text2');
// or
$('body').highlight(['text1', 'text2']);

5. Enable/disable case delicate.

$('.container').highlight('text-to-highlight',{
  caseSensitive: true // default false
});

6. Decide whether or not to focus on solely total words.

$('.container').highlight('text-to-highlight',{
  wordsOnly: true // default false
});

7. Set the phrase boundary.

$('.container').highlight('text-to-highlight',{
  wordsBoundary: '\\b'
});

8. Specify the highlight component tag and class identification.

$('.container').highlight('text-to-highlight',{
  className: 'highlight',
  element: 'span'
});

9. Determine whether or not to disregard diacritics.

$('.container').highlight('text-to-highlight',{
  ignoreDiacritics: false
});

10. Output all of the highlighted text utilizing the callback performance.

$('.container').highlight('text-to-highlight', {
  // options here
}, function(el) {
  console.log('Highlighted: ', el)
});

11. Remove the default highlight.

$('.container').unhighlight();

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)

a 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 the HTML element, defaults to ‘span’.

Fast Word Highlighting Plugin, jQuery.Highlight.js Github, js highlight element, javascript highlight text in div


See Demo And Download

Officiaal Website(knownasilya): Click Here

This superior jQuery/javascript plugin is developed by knownasilya. For extra Advanced Usage, please go to the official website.

Share