How to highlight RegEx matches with jQuery?

Question

With the code as the base, is it possible to highlight any matching items without using an extra plug-in?

I'd like to add style="backgorund: green;" to the divs where the items were found, so that I can immidiately see them.

The things I've tried so far haven't been working, so I'm hoping some fresh thoughts from outside my brain will do the trick.

function finder(items){
    var needed = [
         /* items */
    ];
    var re = new RegExp(needed.join("|"), "i");
    return(items.match(re) != null);
}

var found = finder(document.body.innerHTML);
var output = found ? "found" : "not found";

if(output == 'found') {
    //highlight found array item
}

Answer 1

Why reinvent the wheel? There are ready solutions for this. Try this plugin, for instance. Here's the source code for the plugin. It's literally a few lines of code, so if you really feel like writing your own highlighting engine, you can analyse it to see how the highlighting is performed.

Answer 2

You can try something with a replace()

for (var i = 0; i < needed.length; i++) {
    var word = needed[i];
    document.body.innerHTML = document.body.innerHTML.replace(word, '<span style="background: #00ff00">' + word + '</span>');
}

Try it here: http://jsfiddle.net/4kjuw/