Highlight Keywords on Page with jQuery

Platform: jQuery

Published Feb 21, 2013

Updated Feb 21, 2013

329 1

This will take a string of keywords and wrap a highlight span around each word. It takes two inputs: keywords and element:

keywords: The keywords to be highlighted.
element: Where we are looking for the keywords. This element can be a repeated element.

function highlight_words(keywords, element) {

	if(keywords) {

		var textNodes;

		keywords = keywords.replace(/\W/g, '');

		var str = keywords.split(" ");

		$(str).each(function() {

			var term = this;

			var textNodes = $(element).contents().filter(function() { return this.nodeType === 3 });

			textNodes.each(function() {

			  var content = $(this).text();

			  var regex = new RegExp(term, "gi");

			  content = content.replace(regex, '<span class="highlight">' + term + '</span>');

			  $(this).replaceWith(content);

			});

		});

	}

}

You can simply bold the keywords or do what you'd like with this CSS:

.highlight {

	font-weight: bold;

}

We use this here at Hawkee.com for our search function.

Comments

sean - 1 day ago

Great snippet! However, I might have made this a jQuery plugin instead (since we're in the jQuery section :P). This way you could chain the element while offering other (future) parameters. Consider the following implementation:

		Code 			
$('element').highlightWords({
  words: ['keyword1', 'keyword2'],
  effect: 'fadeIn'
});	

Is there a reason you decided against that route?

1 Response

Hawkee - 1 day ago

Good idea! It was really just a quick feature-add, so I didn't flesh it out as much as you suggested. I might just do that if I come back around to working on this again.