HTML中第二条jQuery文本高亮指令未执行的问题排查与解决

问题原因 #

你遇到的问题核心在于脚本位置和html()方法的行为：你的两段jQuery脚本是放在<body>标签内部的，当第一次调用$("body").html(...)时，会将<body>内的所有内容（包括这两段脚本）完全替换成新生成的HTML。这就导致第一个replace执行后，原来的第二个脚本语句已经被从DOM中移除，自然不会得到执行。

另外，原代码还有个小瑕疵：替换时硬编码了小写的dolor和nullam，会把原文中可能存在的大写形式也改成小写，破坏了原文的格式。

修复方案 #

这里提供两种实用的修复方式，更推荐第二种高效写法：

方案1：调整脚本位置

把脚本移到<body>标签外面（比如</body>之后），这样替换<body>内容时不会影响到脚本，两个replace都会正常执行：

<!DOCTYPE html>
<html>
<body>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt a gravida non, tincidunt condimentum nullam. Aliquam mi augue, venenatis sed dolor eget. Aliquam venenatis felis, nullam ante est, nullam mattis massa nec nunc imperdiet convallis.</h1>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$("body").html($("body").html().replace(/dolor/gi, "<mark>$&</mark>"));
$("body").html($("body").html().replace(/nullam/gi, "<mark>$&</mark>"));
</script>
</html>

方案2：合并替换操作（更推荐）

只对<body>的HTML做一次修改，避免多次替换导致的DOM重置和脚本丢失问题，同时用$&保留原文本的大小写：

<!DOCTYPE html>
<html>
<body>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt a gravida non, tincidunt condimentum nullam. Aliquam mi augue, venenatis sed dolor eget. Aliquam venenatis felis, nullam ante est, nullam mattis massa nec nunc imperdiet convallis.</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
// 一次性完成两个单词的替换，仅操作一次DOM
const updatedHtml = $("body").html()
  .replace(/dolor/gi, "<mark>$&</mark>")
  .replace(/nullam/gi, "<mark>$&</mark>");
$("body").html(updatedHtml);
</script>
</body>
</html>

额外优化：精准替换文本（避免误替换标签内容）

如果页面后续添加了其他HTML标签，直接替换整个<body>的HTML可能会误替换标签属性里的内容（比如某个class刚好包含目标单词）。更严谨的方式是只遍历文本节点进行替换：

<!DOCTYPE html>
<html>
<body>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt a gravida non, tincidunt condimentum nullam. Aliquam mi augue, venenatis sed dolor eget. Aliquam venenatis felis, nullam ante est, nullam mattis massa nec nunc imperdiet convallis.</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
// 遍历所有文本节点，仅替换文本内容
function highlightWords(node, words) {
  if (node.nodeType === Node.TEXT_NODE) {
    let text = node.textContent;
    words.forEach(word => {
      const regex = new RegExp(`\\b${word}\\b`, "gi");
      text = text.replace(regex, "<mark>$&</mark>");
    });
    if (text !== node.textContent) {
      const wrapper = document.createElement("span");
      wrapper.innerHTML = text;
      while (wrapper.firstChild) {
        node.parentNode.insertBefore(wrapper.firstChild, node);
      }
      node.parentNode.removeChild(node);
    }
  } else if (node.nodeType === Node.ELEMENT_NODE && node.tagName !== "MARK") {
    // 跳过已经高亮的mark标签，避免重复替换
    Array.from(node.childNodes).forEach(child => highlightWords(child, ["dolor", "nullam"]));
  }
}

highlightWords(document.body, ["dolor", "nullam"]);
</script>
</body>
</html>

这种方式只会替换真正的文本内容，不会影响HTML标签的结构和属性，也避免了重复高亮已经标记的内容。

内容的提问来源于stack exchange，提问作者Anna