jTextHighlighter : Highlight Text with jQuery

HTML5 introduce a new HTML tag called mark. This tag can be useful to highlight important keywords or text in a page you want the used to focus.

Now, this can be nice if you don't have to refresh the page or execute an ajax call just to highlight words. Here's a piece of code you can get in order to do what you need. jTextHighlighter is a jQuery plugin that allow you to highlight any text in a paragraph.

Basics

By default, the mark HTML tag comes with already what you need to get the attention of the user, but if you can always change the style to match the look and feel of your site.

mark {
 background: #ff8;
 color: #fff;
}

Make it work

To highlight a word, simply use the following code with the word you want to highlight:

$('p').jthighlight($(this).data('wordtohighlight'));

To clear a specific, use the following code:

$('p').clearHighlight($(this).data('word'));

or to clear all highlighted words:

<a id="clearHighlight">Clear Highlights</a>

That's it!

Download

You can download the file at: http://www.bookofzeus.com/download/jtexth.js.