在JavaScript中，字符串替换与HTML标签包裹常被看作两个独立操作，但实际业务里它们往往绑在一起。例如搜索结果高亮、关键词自动加链接、敏感词标注等，都需要先定位目标文本，再在对应位置插入标签。问题在于，字符串级别的替换无法感知HTML结构，DOM级别的操作又容易写复杂。本文从几种典型方案入手，比较它们在不同场景下的准确性和安全性。
接下来我们先把最常用的replace方案拆开看，理解它的能力边界。只有明确哪些行为可控、哪些行为会失控，后续在选择DOM方案时才有判断依据。
replace与正则：快速但需要边界意识
String.prototype.replace是处理动态替换的基础工具。当第一个参数是字符串时，它只会替换第一个匹配项；要覆盖所有出现的位置，必须传入带g标志的正则。假设我们想给一段纯文本中的某个词加上高亮效果，可以这样写：
function highlightPlainText(text, keyword) {
var pattern = new RegExp(keyword, 'g');
return text.replace(pattern, function (match) {
return '<span class="highlight">' + match + '</span>';
});
}
这段代码在理想情况下能工作，但存在两个明显隐患。其一是keyword中如果包含正则特殊字符，例如点号、星号、问号或括号，构造出的RegExp会偏离字面匹配意图。其二是如果text本身携带HTML，replace会在标签属性或标签名中误伤结构。因此这种方案更适合已经确认是纯文本、且关键词经过转义处理的场景。
要解决正则特殊字符问题，可以在构造RegExp前统一转义。MDN提供过一个通用转义函数，核心逻辑是把正则中的保留字符前加上反斜杠。下面这个版本会转义常见元字符：
function escapeRegExp(str) {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
注意，第三个方括号里的反斜杠需要写成两个反斜杠，才能在正则字符类中表示单个反斜杠。调用escapeRegExp后再创建正则，基本能保证关键词按字面匹配。不过即便如此，replace返回的仍然只是一个字符串，如果输入文本中包含HTML标签，仅靠正则判断文本边界会非常困难。下一步我们要处理的是：当需要插入的标签和用户输入混在一起时，如何避免跨站脚本。
安全包裹：先转义再替换，还是直接用DOM写入
当输入内容来自用户或第三方接口时，直接将字符串塞进innerHTML是危险操作。即使你没有在后端拼接SQL，前端渲染时也可能被注入<script>或事件属性。一个常见错误是只对关键词做高亮，却忽略了原始文本中的尖括号。例如用户昵称包含<img src=x onerror=alert(1)>，如果原样插入，脚本就会执行。
这里需要区分两种安全思路。第一种是先对整段文本做HTML转义，把<和>等字符变成无害实体，再执行替换并把需要包裹的标签作为真正HTML插入。第二种是放弃字符串拼接，直接使用textContent设置文本，再通过DOM API生成标签。后者更可靠，因为浏览器不会解析textContent中的任何标签。
下面是一个结合转义和替换的工具函数。它对原始文本先转义，再对已经转义后的关键词进行包裹，这样能避免绝大多数反射型XSS：
function escapeHtml(text) {
var div = document.createElement('div');
div.appendChild(document.createTextNode(text));
return div.innerHTML;
}
function highlightEscaped(text, keyword) {
var escapedText = escapeHtml(text);
var escapedKeyword = escapeHtml(keyword);
var pattern = new RegExp(escapeRegExp(escapedKeyword), 'g');
return escapedText.replace(pattern, function (match) {
return '<mark class="highlight">' + match + '</mark>';
});
}
这里的escapeHtml没有手写字符映射，而是借助浏览器原生能力：创建文本节点再读取innerHTML，得到的字符串中所有会破坏HTML结构的字符都已经被转义。随后对escapedKeyword做同样处理，再调用前面定义好的escapeRegExp构造正则。这样处理之后，即使关键词中带有尖括号，也不会被误当成标签解析。
不过这种方案仍然有一个边界：它返回的是HTML字符串，最终还是要交给innerHTML渲染。只要转义逻辑正确，安全性就能保证；但如果后续有人再次拼接或处理这段字符串，仍可能出错。因此我更推荐在真正需要结构化插入时，使用下一节的DOM节点级操作。
DOM文本节点遍历：不破坏现有结构的精确替换
如果页面内容已经存在于DOM中，而不是一段独立字符串，那么继续用正则替换再回写innerHTML会带来两个问题：一是原有DOM上的事件监听、表单状态会被重置；二是正则无法可靠识别标签边界，可能把class属性中的关键词也替换掉。要解决这些问题，可以把替换目标从HTML字符串降至文本节点。
文本节点是DOM中最小的文本单元，它们不包含任何子标签。遍历所有文本节点并逐一检查，就能避开标签名、属性名和注释内容。浏览器原生提供了TreeWalker API，可以用SHOW_TEXT过滤器快速收集文本节点。下面这个函数会在指定根节点下查找包含关键词的文本节点，并把关键词用<mark>包裹：
function highlightInDOM(root, keyword) {
if (!keyword) {
return;
}
var walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
var textNodes = [];
while (walker.nextNode()) {
var node = walker.currentNode;
if (node.nodeValue.indexOf(keyword) !== -1) {
textNodes.push(node);
}
}
textNodes.forEach(function (textNode) {
var text = textNode.nodeValue;
var parts = text.split(keyword);
var fragment = document.createDocumentFragment();
parts.forEach(function (part, index) {
fragment.appendChild(document.createTextNode(part));
if (index !== parts.length - 1) {
var mark = document.createElement('mark');
mark.className = 'highlight';
mark.textContent = keyword;
fragment.appendChild(mark);
}
});
textNode.parentNode.replaceChild(fragment, textNode);
});
}
这个函数的关键是把每个文本节点按照关键词拆分成若干段，非匹配部分作为普通文本节点插入，匹配部分创建<mark>元素并用textContent填入关键词，而不是用innerHTML。这样即使关键词或原文中包含尖括号、引号或ampersand，也不会被当成HTML解析。replaceChild一次性替换原文本节点，能保证DOM结构完整。
需要注意的是，拆分后的片段顺序必须与原文本一致，所以循环中先append文本再append标记。另一个常见问题是重叠关键词，例如同时匹配ab和b，split方法只能处理一种，容易漏掉后半段。对于这种复杂匹配，可以在循环中重新检测剩余文本，或者使用更细粒度的区间合并算法。不过大多数搜索高亮场景关键词是唯一的，上述方法足够。
另外，对于包含script或style的文本节点，TreeWalker会正常返回它们，但通常高亮逻辑不应该修改脚本内容。可以在遍历时增加判断，跳过node.parentNode为<script>或<style>的节点。虽然文本节点本身没有标签名，但可以通过parentNode判断。
边界场景：重叠匹配、空关键词与批量更新
动态替换的精确往往体现在边界条件上。一个常见问题是对空字符串的处理：如果keyword为空，String.prototype.split会把每个字符都拆开，生成大量空文本节点，甚至导致死循环或页面卡顿。因此任何替换函数都应该在入口处检查keyword.length === 0或直接返回原文。
另一个需要关注的是重叠匹配。比如文本为aab，要替换aa和ab，正则replace会先匹配aa，然后在剩余b上找不到ab；而人工期望可能是选中aa后仍识别出ab。这类需求已经超出普通字符串替换，需要维护匹配区间的排序与合并。可以先把所有可能匹配的起止位置收集到数组中，再按优先级合并，最后从后往前插入标记。
性能方面，DOM遍历方案在文本节点数量很大时也不会有明显瓶颈。因为TreeWalker的遍历是线性的，拆分后的DocumentFragment也只是局部替换，不会引发整个容器重排。如果要对同一段落连续高亮多个关键词，最好先收集完所有文本节点，再批量处理，避免遍历过程中DOM变化影响后续节点引用。
JavaScript字符串替换HTML标签包裹正则表达式修改时间：2026-10-06 23:48:45