Highlighting text with JavaScript

03 Jan 2009

Here’s a bit of code which allows you to highlight any text within any specified container. I’m not sure of a practical application for this; it’s just a bit of fun. If you’re thinking that you can highlight search keywords then don’t use this! That kind of functionality should really be handled on the server-side.

The Code:

function highlight(container,what,spanClass) {
    var content = container.innerHTML,
        pattern = new RegExp('(>[^<.]*)(' + what + ')([^<.]*)','g'),
        replaceWith = '$1<span ' + ( spanClass ? 'class="' + spanClass + '"' : '' ) + '">$2</span>$3',
        highlighted = content.replace(pattern,replaceWith);
    return (container.innerHTML = highlighted) !== content;
}

You can specify the container, the word to be searched for, and the class to be given to the wrapping span (e.g. ‘highlight’).

Usage:

highlight(document.getElementById('content'),'hello','highlight'); // This will return false if the word was not found...

jQuery version:

$.fn.highlight = function(what,spanClass) {
    return this.each(function(){
        var container = this,
            content = container.innerHTML,
            pattern = new RegExp('(>[^<.]*)(' + what + ')([^<.]*)','g'),
            replaceWith = '$1<span ' + ( spanClass ? 'class="' + spanClass + '"' : '' ) + '">$2</span>$3',
            highlighted = content.replace(pattern,replaceWith);
        container.innerHTML = highlighted;
    });
}

Usage:

$('#content').highlight('hello','highlight');

Note: Don’t set the container as a parent of any SCRIPT tags. So, if your body contains any script tags, don’t set the body as the container.

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!

So far there's been 6 Responses to
“Highlighting text with JavaScript”

Farrhad A on Twitter January 3rd, 2009 at 1:41 pm

Nice tip 🙂
Will keep it in mind.

Ibrahim January 3rd, 2009 at 6:27 pm

Cool thanks 🙂

Robert Samuel Clay January 3rd, 2009 at 7:40 pm

James,

A worthy idea, but there are always edge cases that either don’t work, or are a bit finicky with regular expressions. Having recently written a highlighting script, ensured to work across all A-grade browsers (yup, that includes IE6), there is only one perfect way to accomplish this without poking around in the dark for those edge cases.

Walk the DOM tree looking for textNodes, then using doing a simple indexOf on the content of a textNode. jQuery makes this obscenely easy:

 
(function($) { // main code
	$.textNode = function(s) {return $(document.createTextNode(s))};
	// create a $ containing a single textNode, very useful for appendTo()
 
	$.fn.extend({
		textNodes: function(deep) { // requires an ender
		// return the text noded under a dom node, either deep or shallow (one level down)
			var texts=[];
			this.each(function(){
				var children =this.childNodes;
				for (var i = 0; i < children.length; i++){
					var child = children[i];
					if (child.nodeType == 3 && child.parentNode.nodeName.toLowerCase().indexOf('script') == -1) {
						texts.push(child);
					}
					else if (deep && child.nodeType == 1)
						[].push.apply(texts,$(child).textNodes(deep,true));
				}
			});
            // DAYLIFE.log(['textNodes', this, arguments[1]]);
			return arguments[1] ? texts: this.pushStack(texts);
		}
	})
})(jQuery);

Then use this .textNodes method on containers:

var self=this;
textNodes.each(function() {
    if (!found) {
        if (self.invalid_tag(this.parentNode)) return;
        var textnode_text = this.data;
        var topic_loc = textnode_text.indexOf(topic_alias);
        while (topic_loc != -1) {
            //DAYLIFE.log(['Analyzing match', textnode_text.substr(topic_loc+topic_alias.length, 1).search(/[.,?!)]:;<s]/)]);
            if (self.is_valid_topic_terminator(textnode_text, topic_loc, topic_alias)) {
                topic_loc = textnode_text.indexOf(topic_alias, topic_loc+topic_alias.length);
                continue;
            }
            // DAYLIFE.log(['Found good match', topic_alias, topic_loc, topic_alias.length]);
            before = document.createTextNode(textnode_text.substring(0, topic_loc));
            after = document.createTextNode(textnode_text.substring(topic_loc+topic_alias.length));
            original = textnode_text;
            $(this).before($(before));
            $(this).after($(after));
            $(this).before(wrap_topic(topic, topic_alias));
            this.parentNode.removeChild(this);
            found = true;
            return;
        }
    } 
});

You’ll have to fill in the gaps for some of those external methods and variables (like found and wrap_topic, but a it should not be difficult to do this.

Robert Samuel Clay January 3rd, 2009 at 7:42 pm

Of course, that textNodes refers to this:

        var textNodes = $(selector).textNodes();

This is how you extract all of the textNodes in a container into a simple array.

James January 3rd, 2009 at 10:33 pm

Wow Robert! Awesome stuff! My regex attempt was just for a little bit of fun, and to learn a bit, I didn’t think it was a particularly solid implementation. Yours looks superb, thanks for commenting! 🙂

Baki September 14th, 2009 at 11:47 am

I want to search for style=”color:#0000FF;” in the source code and replace it with class=”0000FF”

Is this possible to do.

Thanks

Highlighting text with JavaScript

The Code:

Usage:

jQuery version:

Usage:

So far there's been 6 Responses to “Highlighting text with JavaScript”

So far there's been 6 Responses to
“Highlighting text with JavaScript”