jQuery Highlight Plugin

It will probably not be a big surprise that jQuery Highlight plugin can be used to highlight pieces of text on a page. It's based on great Highlight plugin by Johann Burkard. To be honest most of the credit should go to him, as all I did was a little refactoring and customisation (so blame me if I broke something).

How does it work

See the highlighted word in the title of this page? The code shown below was used to do it.

  1. $("h1").highlight("highlight");

Highlight plugin searches through the text of given elements (<h1> in this case) to find the term (word 'highlight' in our example) to highlight. When the term is found it's simply wrapped with a <span class="highlight"> element (other element and class names can be given as parameters – we will discuss it later).

Wrapping found terms with elements is all this plugin does, so to visually highlight them you need to define some CSS rule, for example:

  1. .highlight {
  2. background-color: #FFFF88;
  3. }

If you don't want to define such rule in CSS, you can do whatever you need with highlighted elements using jQuery. The code below will have the same effect as CSS rule above.

  1. $(".highlight").css({ backgroundColor: "#FFFF88" });

Demo and usage

All the code samples below are runnable. Simply click on them to run the code on this page.

Basic usage

As we already shown above in How does it work section, you can highlight text in any elements simply by running highlight function on them. So to highlight word 'highlight' in every paragraph of this page run:

  1. $("body p").highlight("highlight");

To remove the highlight within given element run unhighlight function, just like this:

  1. $("body p").unhighlight();

Of course with this jQuery highlight plugin you don't have to limit yourself to short search terms:

  1. $("body p").highlight("jQuery highlight plugin");

but be aware that this plugin will only find text that is contained by single element, so if search term will be splitted into more than one node, it wont get highlighted.

You can highlight more than one text at once by running highlight with an array of terms as a first attribute. It's much faster than running the highlight function several times.

  1. $("body p").highlight(["jQuery", "highlight", "plugin"]);

Options

There are several options that can be given as second parameter to change the way highlight function behaves.

If you played with examples above you will probably want to unhighlight everything now. Feel free to use this code sample any time you need:

  1. $("body p").unhighlight();

caseSensitive

The option called caseSensitive defaults to false and controlls if the case of the text should be significant during search.

If you don't want to ignore the case of the words, change this value to true, like in the example below:

  1. $("body p").highlight("Highlight", { caseSensitive: true });

The code above should highlight only 'highlight' words that start with capital letter, like this one: Highlight.

wordsOnly

Option wordsOnly can be used to search for whole words (not just pieces of text). It defaults to false, so each ocurrence of search term is highlighted.

If you want only to highlight whole words, turn wordsOnlu option to true:

  1. $("body p").highlight("light", { wordsOnly: true });

The sample above should highlight only the exact 'light' words, not the 'light' text in 'highlight'.

element, className

You are not limited just to <span class="highlight"> elements. Element and class names are controlled by options called element (defaults to span) and className (defaults to highlight).

If you want to change element and/or class name used while highlighting change the values of element and className while running highlight:

  1. $("body p").highlight("highlight", { element: 'em', className: 'error' });

Remember that unhighlight function removes the highlight based on element and class names, so if you change these options while highlighting you need to pass them also to unhighlight:

  1. $("body p").unhighlight({ element: 'em', className: 'error' });

Thanks to jQuery, you can do simply everything with highlighted elements. For example these simple two lines of code below turn each reference to jQuery into a link to jQuery home page:

  1. $("body p").highlight("jQuery", { element: 'a', className: 'jQueryLink'});
  2. $("body p a.jQueryLink").attr({ href: 'http://jquery.com' });

Where to get it?

jQuery Highlight plugin is licensed under MIT license. The source code is available in my sandbox on GitHub, so feel free to get or fork it from there. You can also use a direct link to jquery.highlight.js file.

Contact

If you have any comments feel free to contact me via twitter (@bartaz) or visit my blog (http://itsabodybuildingblog.com).