如何禁用innerHTML的HTML格式化？实现输入框值原样复制到段落

嗨，这个问题太典型了——innerHTML的本职工作就是解析HTML内容，所以当你把带标签或特殊字符的文本塞进去时，浏览器自然会把它当成HTML来渲染，而不是纯文本。想要原样保留输入的内容，其实换个DOM属性就能轻松搞定，根本不用手动去转义那些特殊字符。

核心解决方案：用textContent替代innerHTML #

textContent是DOM标准提供的属性，专门用来处理纯文本内容——它会把所有赋值给它的内容都当作原始纯文本对待，不会解析任何HTML标签或特殊字符。直接看代码示例：

<!-- HTML结构 -->
<input type="text" id="sourceInput" placeholder="试试输入 <b>加粗文本</b> 或者 &amp; 这类特殊字符">
<p id="targetPara"></p>

<script>
// 获取元素
const inputEl = document.getElementById('sourceInput');
const paraEl = document.getElementById('targetPara');

// 监听输入事件，实时同步内容
inputEl.addEventListener('input', () => {
  // 关键：用textContent替代innerHTML
  paraEl.textContent = inputEl.value;
});
</script>

当你在输入框里输入<h1>标题</h1>或者Hello & World时，段落里会完完整整地显示这些原始文本，而不会把<h1>渲染成标题，也不会把&解析成空格。

可选：用innerText（和textContent的区别） #

如果你需要更贴近用户视觉上看到的文本效果（比如忽略隐藏元素的文本、自动处理换行和空格），也可以用innerText，它同样不会解析HTML标签。不过textContent是W3C标准属性，兼容性更好，在大多数场景下用它就足够了。

为什么不推荐手动转义？ #

如果坚持用innerHTML，你需要手动把特殊字符转成HTML实体（比如<→<，>→>，&→&），但这样不仅麻烦，还容易遗漏边缘情况。比如：

// 手动转义的示例（不推荐，不如textContent方便）
function escapeHtml(text) {
  return text.replace(/[&<>"']/g, char => {
    const entities = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#39;'
    };
    return entities[char];
  });
}

// 然后用innerHTML赋值
paraEl.innerHTML = escapeHtml(inputEl.value);

这种方法不仅代码冗余，还得维护转义规则，远不如直接用textContent省心。

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