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 class是学校中最好的班级”，它会破坏页面结构

Answer 1

好吧，我明白了，“onpage”搜索......嗯......

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

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

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

在搜索结果中按js选择单词

1 个答案: