Question

我需要在任何DOM级别使用JavaScript或jQuery匹配字符串中的文本，这不是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()方法，它允许我使用find / replace操作文本，但是因为你正在处理DOM，所以似乎不可能更新页面源代码。文本节点：它不允许我将这些<span>标记插入到源代码中。

否则，我很难过。谢谢！

Answer 1

要定位包含特定字符串的选择器，请使用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标志使正则表达式不区分大小写。它将匹配以下

Answer 2

要仅使用.text（）方法访问文本，所以：（不得不逃避单引号）

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

返回：＆＃34; Foo foobar foofoo foo。＆＃34;

从那里做你想做的事。

Answer 3

我找到了一个有效的解决方案here。呼。

该页面上的其他答案也非常有用且信息丰富。