如何转义文本中的HTML标签？脚本注入引发语法错误求解

问题根源 #

你遇到的错误是因为直接将未转义的字符串插入到document.write()中，当字符串包含</script>或<script>这类标签时，会破坏当前脚本的语法结构：

• 当name为</script>test时，</script>会直接闭合当前的<script>标签，剩余的test变成脚本外的无效代码，触发语法错误。
• 当name为<script>asda<script>时，插入的<script>会被JS解析器当作新的脚本标签，导致语法混乱。

解决方案 #

方案1：改用DOM操作（推荐）

放弃document.write，直接通过DOM元素的textContent属性设置内容——textContent会自动将所有内容当作纯文本处理，既不会解析HTML标签，也不会破坏脚本结构。

示例代码：

<td><a href="#" id="name-target"></a></td>
<script>
  const name = '</script>test'; // 含特殊标签的变量值
  document.getElementById('name-target').textContent = name;
</script>

这样页面会直接显示</script>test纯文本，不会触发任何语法错误。

方案2：手动转义特殊字符（如果必须用document.write）

编写一个HTML转义函数，将特殊字符替换为对应的HTML实体，避免破坏脚本结构和HTML解析：

function escapeHtml(str) {
  return str.replace(/&/g, '&')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
}

然后在document.write中使用该函数：

<td><a href="#"><script>
  const name = '</script>test';
  document.write(escapeHtml(name));
</script></a></td>

转义后，</script>会被转换为</script>，浏览器渲染时会显示为</script>纯文本，同时不会破坏脚本结构。

注意事项 #

优先选择DOM操作的方式，document.write在现代前端开发中属于不推荐的写法——它在页面加载完成后调用会清空整个页面，且行为不可控，容易引发各种意外问题。

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