Text higlighting is part of DynaCloud – where tags/keywords are automatically highlighted once they’re clicked – so I took that code and made it a stand-alone JavaScript text highlighting jQuery plugin.

Usage
Add highlight

Download jquery.highlight-3.js (2 KB) and add it to your page after jQuery from link in bottom.

Style the highlight class

Create an entry in your style sheet for the highlight class.

.highlight { background-color: yellow }

Highlight terms

Call the highlight function with the text to highlight. To highlight all occurrances of “bla” (case insensitive) in all li elements, use the following code:

$('li').highlight('bla');

Remove highlighting

The highlight can be removed from any element with the removeHighlight function. In this example, all highlights under the element with the ID highlight-plugin are removed.

$('#highlight-plugin').removeHighlight();

Demo: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
Download: http://johannburkard.de/resources/Johann/jquery.highlight-3.js
Source: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

Related Listings:

1. JavaScript Text Higlighting jQuery Plugin Text higlighting is part of DynaCloud – where tags/keywords are...
2. jQuery Plugin: Tokenizing Autocomplete Text Entry This is a jQuery plugin to allow users to select...
3. Airport – Information board text effect jQuery plugin Airport is a rather simple text effect plugin for Jquery....
4. Tweetable – A jQuery plugin Tweetable is a lightweight jQuery plugin which enables you to...
5. Jquery DynaCloud Usage Add class attributes Add the dynacloud class to all...

Do you like this post?

Email: