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
}

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
}

• javascript
• jquery
• regex
• match
• highlight

• 1 Related: I did something similar recently: github./Ralt/regexfiddle – Florian Margaine Commented Dec 21, 2012 at 12:46
• Do you want to add the style to the div having the text, or create a span around the text found to highlight only it? – Florian Margaine Commented Dec 21, 2012 at 12:49
• @FlorianMargaine I want to add the style to the element containing the find, not create a new element around it. Will look through the answers given so far now to see if there's already something I can work with. – spiel Commented Dec 21, 2012 at 19:38

4 Answers 4

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.

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/4kjuw/

Using innerHTML is evil as it will replace events and triggers generation of the DOM over and over again. I'd remend to use an existing plugin as there are more pitfalls you will ran into. Have a look at mark.js to highlight custom regular expressions.

I changed around my code a bit and solved it like this:

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

var found = finder(document.body.innerHTML)[0];
var foundItem = finder(document.body.innerHTML)[1];

if(found === true) {
    $('div:contains('+foundItem+')').css("background", "greenyellow");
}