Highlight Keywords on Page with jQuery

Platform:  jQuery
Published  Feb 21, 2013
Updated  Feb 21, 2013
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

Sign in to comment.
sean   -  May 22, 2013
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
 

Is there a reason you decided against that route?
Hawkee  -  May 22, 2013
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.
Sign in to comment

Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.