Question

I am using jQuery and creating now search. And i want to change all words that match of search.

For example:

i type in textbox “hello world”, Script get all words “hello” and “world” on page and replace it on “<b class="search_word">hello</b>” and “<b class="search_word">word</b>“.

Is it possible?

PS.

Search in div but div contains many other html elements.

now i am using this:

if ($("#search_input").val() != "") {
    var words = $("#search_input").val().split(/\s/g)
    for (var i = 0; i < words.length; i++) {
        var new_reg = new RegExp(words[i], 'gi');
        var replaced = $(".content_area").html().replace(new_reg, "<b class='searched_word'>"+words[i]+"</b>")
        $(".content_area").html(replaced);
    }
}

it works but tags…

if i search something like: “b class is the best class in School” it destroy page structure

Answer 1

Ahh ok, I understand, “onpage” search… hm….

this is a copy from How do I select text nodes with jQuery?

var getTextNodesIn = (function() {
    function textNodeFilter() {
        return this.nodeType == 3;
    }

    return function(el) {
        var $el = $(el);
        return $el
            .contents()
            .filter(textNodeFilter)
            .add(
                $el
                   .find("*")
                   .contents()
                   .filter(textNodeFilter)
            );
    };
})();

you can now use

getTextNodesIn("body").each(function() {
 var txt = $(this).text();
 $(this).text(txt.replace(new RegExp(myWord,"g"), "<b>" + myWord + "</b>"));
});

Loop now through all of them and aply my filter previously written.

There where you found your word, you must select the whole text, and replace the found word with found Word