0

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

$("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/

有什么问题？我怎样才能使这个不区分大小写？

4

1 回答 1

0

显然，您的标记中没有任何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>');
});

演示。在这里，我修剪了要处理的节点列表replaceWith（使用/abc/.test(...)） - 以使该列表尽可能苗条。

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

于 2013-11-13T18:15:18.790 回答