jQuery .html ( ) 函数在尝试在页面上包装元素时出现异常行为

Question

我正在获取页面上包含“em”的每个文本节点

然后我将文本节点的父节点的 html（即文本）替换为新的 HTML。

在您的控制台上尝试以下代码。它应该突出显示当前页面上的所有“em”文本。

但事实并非如此。相反，它弄乱了整个页面。我做错了什么？

我认为 :contains 寻找文本节点，而不是 HTML。

var someString = "em";
$(':contains("' + someString + '")').each(function ()
{
  var oldHTML = $(this).html();
  var regex = new RegExp(someString, "g");
  var newHTML = oldHTML.replace(regex, '<span style="background-color: yellow;">' + someString + '</span>');
  $(this).html(newHTML);
});

很抱歉，我无法为我的奇怪问题找到更直观的标题 - 如果可以，请随时更改它！ :)

谢谢！

编辑：

原来我的 .replace(...) 也在替换 html 标签，而不仅仅是纯文本。

我应该一直在做类似的事情（虽然我不确定这是正确的正则表达式）：

var regex = new RegExp("<.*>(" + someString + ")\/.*>", "g");
var newHTML = oldHTML.replace(regex, '<span style="background-color: yellow;">' + someString + '</span>');

Answer 1

添加我的两美分作为官方答案：这是因为您不只是在寻找纯文本。你不想要 html 元素。

在这里查看更多问题：regular expression to extract text from HTML

你最好在服务器上做高亮显示，在那里你可以很容易地分辨出什么是文本。