Highlight words in text with jQuery

On the right is an example of word-highlighting in a blog post, done with jQuery (my javascript library of choice).  I needed to highlight certain words in blocks of formatted text, so I went searching for an existing solution.  I found a pretty good starting point, posted by bjarlestam on Stackoverflow.  His highlighting function is below.  It wraps the word inside a span tag with a class of your choosing.

jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        this.innerHTML = this.innerHTML.replace(regex, function(matched) {
            return "<span class=\"" + className + "\">" + matched + "</span>";
        });
    });
};

This is nice, because it uses a case-insensitive regular expression to find the word to highlight.  However, there is a flaw.  If you call this function on an element with non-text child elements, and the tag/attribute names or attribute values match the word to highlight, this function will mess up your HTML.  We’d like it to apply only to text nodes.

Initially I thought this would be easy.  There must be a text selector in jQuery, allowing you to select only text nodes. But (as of this writing) there isn’t!  (There is a “:text” selector, but it’s for input tags.) So, maybe we could use the :contains() selector, which selects all elements with text containing a given string.  But (as of this writing), the :contains() selector is case-sensitive only, so I abandoned that idea.

It turns out that I had to use the .contents() and .filter() methods in combination to select all the text nodes.  .contents() returns all children including text nodes.  .filter() can narrow those down to just text nodes by checking this.nodeType == 3.  Now all we must do is set the value of these nodes to the output of the regex, right?  Nope, because this output may contain <span> tags, and text nodes cannot have HTML tags as children.  We must actually replace the text nodes with the output of the regex.  That’s where the .replaceWith() method comes in. The replacing content may be text-only or a mix of text and tags.

So here it is, my jQuery function for highlighting words in text, case-insensitive:

jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<span class=\"" + className + "\">" + match + "</span>";
            });
        });
    });
};

** Requires jQuery 1.4.2 or higher! ** Will not work with older versions.

Note, I added regex.test(this.nodeValue) inside the filter. Doing so limits the number of regex replacement calls, and resulted in a 30% speed increase on Firefox.

Calling this function, for example on all descendants of elements with class “testHighlight”, looks like this:

$(".testHighlight *").highlight("afghanistan", "highlight");

All instances of the word “afghanistan” will be wrapped in a span tag with the class set to “highlight” (defined in CSS to have background-color: #ff2;). Again, this is case-insensitive. Tested on Firefox 3.6 and IE8. Please let me know if it breaks on other browsers, or if the code can be improved.

Quick demo: highlight the word jQuery.