Highlight Text using JQuery

Today we will make use of a simple JQuery plugin and build a small functionality which will basically highlight text which we are searching. Its use is very easy, let’s download it from Here.

The plugin provides 2 functions, one will highlight a text and another will remove all highlighted text. Also, we can define a CSS for the highlighted color, whether it should be Yellow or green or whatever you want.

The functions we will use are:

1. To highlight text:

The above line with highlight all “sometext” string in the whole element having ID #searchPara.

2. Remove Highlight text:

Above will remove all highlighted text in #searchPara.

I am going to use Yellow color to highlight text, so here is my CSS:

So, let’s quickly make a simple UI having some text paragraph, a search box, the complete HTML will look like below:

Leave a Reply

Your email address will not be published. Required fields are marked *