Выберите слова по js в результатах поиска

Question

Я использую jQuery и создаю сейчас поиск. И я хочу изменить все слова, которые соответствуют запросу.

Например:

Я вписываю в текстовое поле «Привет мир», Сценарий получает все слова «Привет» и «Мир» на странице и заменяет их на «<b class="search_word">hello</b>» и «<b class="search_word">word</b>».

Возможно ли это?

PS.

Поиск в div, но div содержит много других html-элементов.

Теперь я использую это:

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);
    }
}

это работает, но теги ...

если я ищу что-то вроде: «b класс - лучший класс в школе», это разрушает структуру страницы

Answer 1

Ах, хорошо, я понимаю, поиск на странице ... хм ....

это копия из Как выбрать текстовые узлы с помощью 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)
            );
    };
})();

теперь вы можете использовать

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

Проходить сейчас через все из них и применить мой фильтр, написанный ранее.

Там, где вы нашли свое слово, вы должны выбрать весьтекст и замените найденное слово на найденное слово