通过js在搜索结果中选择单词

Question

我正在使用 jQuery 并创建现在搜索。我想更改所有匹配搜索的单词。

例如：

我在文本框中输入“hello world”，脚本获取页面上的所有单词“hello”和“world”并将其替换为“<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

啊，好吧，我明白了，“页面”搜索...嗯....

这是来自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)
            );
    };
})();

你现在可以使用

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

现在遍历所有这些并应用我之前编写的过滤器。

在你找到你的单词的地方，你必须选择整个文本，并将找到的单词替换为 found Word