Question

我结合使用快速搜索功能和突出显示功能来向用户显示突出显示的查询。我可以突出显示，这可以通过将找到的元素包装在一个范围中来完成：

Query: "examp";

<h4>This is an <span class="highlight">examp</span>le query</h4>

然而，这非常有效，但在用户的每个下一个查询之前，我需要删除先前突出显示的元素。

当前精彩集锦功能：

jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<span class=\"" + className + "\">" + match + "</span>";
            });
        });
    });
};

目前我使用的是一个简单的功能：

function clearHighlights(className) {
    $('span.'+className).each(function() {
        $(this).replaceWith($(this).text());
    });
}

但是当你运行$('selector').contents()时，我最终会遇到["This is an", "examp", "le query"]。这突破了我的突出功能。

那么有没有办法连接.contents()？或者更好的方法来运行突出显示功能？

Answer 1

这将解决您的问题，重置父级的html（删除无用的换行符）：

function clearHighlights(className) {
    $('span.'+className).contents().unwrap().parent().html(function(){return this.innerHTML});
}

$ .contents（）元素的连接

1 个答案:

DEMO