JQuery Text Highlighting Tutorial

The goal of this tutorial is to gain some experience using some of the more advanced jquery commands while creating something fun and useful. The commands/functions we are going to see in this tutorial are: $, contains, each, html, text, and replace. Once you master this tutorial you will be able to manipulate the text on the page via javascript. This same approach will allow us to highlight text on our page or even create links dynamically.

1) We are going to create our HTML page. There is really nothing special about this page other than the fact that it includes the jquery library:

	<script type="text/javascript"
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

A link to the new file that has our newly created javascript code in it:

	<script type="text/javascript" src="highlight.js"></script>

A css style block (This can and should be placed into its own file much like the javascript file) that will determine how the highlighted text should look:

	<style>
		.highlight {
			background:#F6FF00;
		}
	</style>

2) Now let's take a look at highlight.js (This is really why you are reading this tutorial after all).


1.      var str = "the ";
2.      $(function(){
3. 	       $('p:contains('+str+')').
4.		       each(function(){
5.			     var regex = new RegExp(str, "g");
6.			     $(this).html(
7.				     $(this).html().
8.					     replace( regex ,
9.						     	 "<span class='highlight'>"+str+"</span>"
10.						     	)
11.		       );
12.	       });
13.      });

Line 1: we set a string variable to the value we want to highlight on the page.

Line 2: we call the default "$(function(){<code here>})" This make all the code inside the function execute when the page loads (similar to the onload hander you may have seen in html pages), there are other identical versions of this such as the ready() jquery call).

Line 3: This is where we extract all the nodes from the html that contain the string value we are looking for. The "p:contains('<search string here>')" defines a path from <p> (you could specify "div" or "*" if you wanted a different set of nodes or any node) and then is looking at the contents of that element and returning a list of those that match the search string.

Line 4: The each method then takes the list of nodes from the contains call, and iterates over every one, applying the function that is passed in to the each() call. The "this" variable defines the current node.

Line 5: Here we create a regular expression that contains our search string and the modifier "g" that means global – search all occurrences.

Lines 6,7: The html() call returns the contents of a node, but can also be used to set the contents of a node (similar to innerHTML, only better) It may seem like we have duplicate code as we see the html() call twice. However the first is setting the contents of the node to the contents of the second html() call (that is actually getting the contents), but with modifications (As we will see in line 8, from the replace call).

Line 8,9: replace is a regular expression replacement call that takes the first argument (a regular expression) and replaces the instances with the second parameter. In this case we are "surrounding" the searched text with a tag for each occurrence in order to allow us to apply a class to it (the one we defined in the css style class defined at the start of the html code).

Line 10..13: Here we are just closing all the opened brackets.

Click on "view source" on the demo page to see and download the code.