JS动态替换pre元素中<>为&lt;&gt;失效，如何实现HTML标记字面显示？

原代码的问题 #

• 用for...in遍历querySelectorAll返回的NodeList时，会遍历到非元素属性（比如length），导致操作的不是DOM元素
• replace()默认只替换第一个匹配项，没法处理多个<和>
• for...in循环里的pre是字符串键，不是DOM元素对象，调用textContent会报错

修正后的代码 #

JavaScript代码 #

// 获取所有pre元素
const pres = document.querySelectorAll('pre');
// 遍历每个pre元素
for (const pre of pres) {
  // 全局替换所有<和>，正则加g标志实现全局匹配
  const escapedText = pre.textContent.replace(/</g, '&lt;').replace(/>/g, '&amp;gt;');
  // 设置回textContent，让浏览器字面显示转义后的内容
  pre.textContent = escapedText;
}

也可以用更简洁的forEach写法：

document.querySelectorAll('pre').forEach(pre => {
  pre.textContent = pre.textContent.replace(/</g, '&lt;').replace(/>/g, '&amp;gt;');
});

对应HTML示例 #

<pre>
foo &lt;strong&gt;bar&lt;/strong&gt;
&lt;!-- this is how html works! --&gt;
</pre>

关键说明 #

• 用for...of或forEach遍历NodeList，确保每次操作的都是真实DOM元素
• 正则表达式添加g（全局）标志，一次性替换所有匹配的<和>
• 操作textContent属性，它会自动处理文本内容，设置后浏览器会将转义后的字符以字面形式显示

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