#JavaScript to find and highlight text on a page (or in any element)

app.css

#all_text span
{
    text-decoration:underline;
    background-color:yellow;    
}

app.html

<input type="text" id="searchfor"/>
<p id="all_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</p>

app.js

$('#searchfor').keyup(function(){
    var page = $('#all_text');
    var pageText = page.text().replace("<span>","").replace("</span>");
    var searchedText = $('#searchfor').val();
    var theRegEx = new RegExp("("+searchedText+")", "igm");    
    var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
    page.html(newHtml);
});

jsfiddle: http://jsfiddle.net/x8rpY/1/