使用JavaScript正则replace时如何忽略HTML实体？

嘿，这问题我之前也踩过坑！直接正则替换HTML字符串的话，很容易把实体里的字母也套上<span>，毕竟正则没法区分哪些是实体的一部分、哪些是真实文本。这里给你两种靠谱的解决方案：

方法一：改进正则表达式，避开HTML实体 #

我们可以用负向预查来排除HTML实体内部的字符。HTML实体的格式是&开头，跟着一串字母/数字，最后以;结尾，所以我们可以写一个正则，确保当前匹配的字符不在&...;这个结构里。

修改后的代码如下：

$('li').each(function() {
  // 负向预查：确保当前字符不在 &...; 的实体结构中
  var replaced_text = $(this).html().replace(/(?![^&;]*;)([a-zA-Z0-9& ])/g, '<span>$1</span>');
  $(this).html(replaced_text);
});

正则逻辑解释： #

• (?![^&;]*;)：这是负向前瞻断言，意思是“从当前位置往后，不会出现一串非&和;的字符直到遇到;”——换句话说，当前字符不在HTML实体内部。
• ([a-zA-Z0-9& ])：精准匹配你需要包裹的目标字符（字母、数字、&、空格）。

方法二：操作DOM文本节点（更稳妥） #

如果页面里的HTML实体比较复杂，正则可能会有遗漏的情况，这时候直接操作DOM的文本节点是更可靠的选择——因为DOM会把HTML实体解析成对应的字符（比如 变成空格），我们只处理纯文本内容，完全不会碰实体的结构。

代码示例：

// 递归遍历所有文本节点的工具函数
function processTextNodes(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    // 替换纯文本里的目标字符
    const htmlContent = node.textContent.replace(/([a-zA-Z0-9& ])/g, '<span>$1</span>');
    // 把处理后的HTML转成DOM节点替换原文本节点
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = htmlContent;
    while (tempDiv.firstChild) {
      node.parentNode.insertBefore(tempDiv.firstChild, node);
    }
    node.parentNode.removeChild(node);
  } else if (node.nodeType === Node.ELEMENT_NODE && node.tagName !== 'SPAN') {
    // 递归处理子节点，跳过已经生成的SPAN标签
    Array.from(node.childNodes).forEach(processTextNodes);
  }
}

// 处理每个li的文本节点
$('li').each(function() {
  processTextNodes(this);
});

这个方法的优势是完全不会干扰HTML实体，因为我们只操作真实的文本内容，实体在DOM里已经被解析成正常字符了，处理起来更安全。

测试你的示例内容 #

用上面两种方法处理你给出的列表项，都会得到正确的结果：

• 原<li>&lt;서베이 WRM&gt;, 2019</li>会变成<li>&lt;서베이 <span>W</span><span>R</span><span>M</span>&gt;, <span>2</span><span>0</span><span>1</span><span>9</span></li>，HTML实体<和>完全不受影响。
• 原<li>가나APAP다라 2018</li>会变成<li>가나<span>A</span><span>P</span><span>A</span><span>P</span>다라 <span>2</span><span>0</span><span>1</span><span>8</span></li>，完全符合预期。

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