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

Question

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

例如:

我在文本框中输入“hello world”，脚本获取页面上的所有单词“hello”和“world”并将其替换为“<b class="search_word">hello</b>”和“<b class="search_word">word</b>”。

可能吗？

附注。

在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 类是学校最好的类(class)”，它会破坏页面结构

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

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

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