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.
Sweet little piece of code!! I have already added it to my site. A slight problem I found during 'testing' though...
keywords = keywords.replace(/\W/g, ''); // removes any spaces
var str = keywords.split(" "); // uses spaces to split
If you want to separate the keywords string by finding 'spaces' (which is what the second line does), remove the first line.
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:
$('element').highlightWords({
words: ['keyword1', 'keyword2'],
effect: 'fadeIn'
});
Is there a reason you decided against that route?
No need for this function anymore. There's a plugin with much more options: mark.js
(Github: https://github.com/julmot/mark.js)
Just a few little mods. If you want the highlighted text to be CaSe sEnsitiVe, and want to display a count of what is found, here is my little addition :)