Question

我正在以下列方式使用过滤器

$("body div header").find("*").addBack().contents().filter(function(){
    console.log(this.nodeType);
    return this.nodeType === 3;
}).each(function() {
    $(this).parent().html(this.nodeValue.replace(/abc/g, '<span class="abc">abc</span>'));
})

但是这不起作用，因为它没有将类添加到匹配的单词中。 http://jsfiddle.net/hrEyC/3/

可能有什么不对？如何使这种不区分大小写？

Answer 1

显然标记中没有header，因此您尝试处理的第一个jQuery对象是空的。

但是，整个方法有点不对：不同的文本节点将与父节点具有相同的节点，但您每次都基本上重写了此节点的innerHTML。实际上，由于此示例中的大多数第一子文本节点具有'\n '风格，所有其他无关紧要 - 它们将在第一次相应的$(this).parent().html()调用后消失。

您实际应该使用的是replaceWith jQuery方法。例如：

$("body div").find("*").addBack().contents().filter(function(){
    return this.nodeType === 3 && /abc/i.test(this.nodeValue);
}).replaceWith(function() {
  return this.nodeValue.replace(/(abc)/g, '<span class="abc">$1</span>');
});

Demo。在这里，我使用replaceWith另外（使用/abc/.test(...)）修剪了要处理的节点列表 - 使此列表尽可能地变细。

为了使这个搜索不区分大小写，我在两个正则表达式中添加了/i修饰符（并且在替换字符串中也使用了$1 - 您不希望'ABC'成为' abc'突出显示时）。

过滤不处理多个元素

1 个答案: