匹配没有标签的DOM文本

Match DOM text without tags?

本文关键字：DOM 文本 标签      更新时间：2023-09-26

我需要匹配字符串中的文本，使用JavaScript或jQuery，在任何DOM级别，这不是HTML标记的一部分。因此，例如，我需要在下面的文章中匹配单词 foo 5次:

Foo <p class="foobar" id='foo'>foobar foo<a href="/foo">foo</a> foo.</p>

我需要保持全文完整，并带有标签，以供以后使用。这是使用find/replace将每个结果包装在<span />标签中，当它不正确地匹配部分标签和链接时，当前的工作失败。

使用jQuery的.html()方法似乎很明显，但这意味着我必须避开那些讨厌的标签。必要的正则表达式变得太复杂了，我无法处理。(我也知道HTML上的正则表达式有一些风险;我愿意接受另一种方法

例如，我尝试使用jQuery的.text()方法，它可以让我操纵文本，因为我想使用查找/替换，但它似乎不可能更新页面源，因为你正在处理DOM的文本节点:它不会让我插入那些<span>标签到源。

否则，我就难倒了。谢谢!

使用.text()方法来访问文本，所以:(必须转义单引号)

$('<div>Foo <p class="foobar" id=''foo''>foobar foo<a href="/foo">foo</a> foo.</p></div>').text()

返回:"Foo foobar foofoo Foo。"

从那里开始做你想做的。

目标选择器包含一个特定的字符串，使用jQuery的contains选择器。然后可以使用each函数遍历所有这些元素。

$('*:contains("foo")').each(function() {
    $(this).html("<span class='bold'>" + $(this).text() + "</span>");
});

应该注意的是，contains选择器是区分大小写的!我们需要修改jQuery方法以允许找到Foo。将这段代码添加到jQuery文件中。

jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
另一个解决方案是使用jQuery的filter函数，像这样 
var selection = $("*").filter(function() {
    return /FOO/i.test($(this).text());
});

这可能是一个更好的做法，因为您不必修改原始的jQuery代码。test方法接受一个正则表达式，并根据字符串是否包含该表达式返回Boolean。/i标志使regex不区分大小写。它将匹配以下

  • Foo
  • foo
  • FOO
  • fOo
相关文章：