A Simple JQuery Keyword Highlight Plugin For Searches

August 23rd, 2013

For another project, I had a search bar for a blog, and when a user searched for a word or query term, the site would return a list of blogs containing the keyword being searched.  I wanted to take it a step further and highlight the searched keyword in the blog entry itself -- it's not a new idea but I wanted to extend it to the blog search I was working on.  

What I came up with was a simple JQuery plugin that you can use on any page or site that allows you to specify a target class containing content that you want to search on.  All words matching the keyword you specify in the initialization OR via an inline data-keyword attribute will be surrounded by a span class declared with a custom highlight class, for example:  <span class="highlight">keyword</span>.  With the plugin, you can either initialize with options for your keyword, highlight class and case sensitivity. Alternatively, you can initialize the plugin with no options, which you can then configure via inline data attributes.  This is useful for initializing the plugin once on a specific class and then using that same class to target and highlight different keywords.


Searching for "the"
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

Another example searching for "ipsum" with a different custom highlight class:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

How it works

The plugin takes the content of the target element and breaks the content into individual words.  The plugin cycles through each word and compares it to the search keyword (depending on the caseSensitive setting, it'll check for or ignore case senstive words).  When a compare comes back positive, a span class is added to the keyword and appended back into the content.  This new appended content is then placed back into the target element once the search has been complete.

Since the keyword is wrapped in a custom <span> class, you have the freedom to use CSS to custom style the keyword any way that you want, from providing a highlighting background, bolding or making the text larger, etc.


The plugin only finds whole words only and can not search through portions of words.  This includes things such as words surrounded by quotations or ending with a period for example.   1. this word will be found  2. this word will not be found. -- if you search for the keyword "found",  the word "found" will be found.  In the second sentence, because of the added period, the word "found" will not be found.

The Code

The JQuery plugin, docs, and setup instructions can be found here in my jquery-keyword-highlight github project.

  jquery-keyword-hightlight github project

Popular Posts