textcontent 是提取 html 元素纯文本的首选方式，它跳过标签、脚本、样式且不受 css 可见性影响；转义需按 &、、"、' 顺序处理；dom 方式可靠但限浏览器环境；反转义应避免 innerhtml，推荐正则匹配实体。
用 textContent 提取纯文本最安全
直接读取 textContent 是提取 HTML 元素内纯文本的首选方式，它天然跳过所有标签、脚本、样式，也不执行任何转义或渲染逻辑。和 innerText 不同，textContent 不受 CSS 可见性影响，也不会触发重排，性能更稳定。
常见错误是误用 innerHTML 后再手动去标签——这既容易漏掉嵌套结构（比如 <div><p>text</p></div>），又可能引入 XSS 风险。
- ✅ 正确：
const text = el.textContent; - ❌ 错误：
el.innerHTML.replace(/<.>/g, '')</.>（正则无法处理自闭合、注释、CDATA 等） - ⚠️ 注意：
textContent会保留换行、缩进和连续空格，如需标准化空白，后续加.replace(/\s+/g, ' ').trim()
转义 HTML 特殊字符必须覆盖这 5 个核心符号
仅处理 &、、<code>>、"、' 就能覆盖 99% 的显示与解析问题。少一个都可能出错：比如漏转 &，后续再被浏览器二次解析成实体；漏转 '，在属性值中直接截断字符串。
不要依赖“看起来没问题”的正则顺序——& 必须最先替换，否则 会被错译成 <code><。
- ✅ 推荐顺序：先
&→ 再→ 再 <code>>→ 再"→ 最后' - ✅ 一行可读写法：
str.replace(/&/g, '&').replace(/, '/g, '>').replace(/"/g, '"').replace(/'/g, ''') - ⚠️ 避免写成
/[&"']/g一次性替换——映射表里若没按顺序处理&，就会出嵌套转义
DOM 方式转义比正则更可靠，但有使用边界
用 document.createElement('div').textContent = raw; return div.innerHTML; 能自动处理所有标准实体（包括 、© 等），且无需维护映射表。但它只能在浏览器环境运行，Node.js 服务端不可用。
另一个坑是：如果原始字符串含非法 HTML 结构（比如未闭合的 <script>），临时 DOM 可能静默修正或抛错，导致结果偏离预期。</script>
- ✅ 适合场景：前端富文本预览、用户输入实时转义、CMS 后台编辑器输出
- ❌ 不适合场景：SSR 渲染、CLI 工具、爬虫清洗 pipeline
- ⚠️ 注意：该方法不处理 Unicode 字符（如 emoji）、不标准化空白，仍需额外清理
反转义（decode）不能只靠 innerHTML + textContent
从数据库或 API 拿到已转义的字符串（如 <p>Hello & World</p>），想还原为可读文本，很多人直接 div.innerHTML = str; text = div.textContent;。这看似可行，但存在两个硬伤：
- ❌ 若字符串含恶意脚本（如
<img src="x" onerror="alert(1)">），innerHTML会执行它 - ❌ 若字符串本身是纯文本而非 HTML（如日志片段
"Error: <timeout> occurred"</timeout>），强行解析会丢失原意
真正安全的反转义，应只解码实体，不解析标签。可用 DOMParser 或专用库（如 he），但最简方案仍是正则+映射——只匹配 ?\w+; 形式，不碰尖括号。
复杂点在于：有些老系统会混用 < 和 ，甚至出现 <code>。这种嵌套转义必须递归处理，一次替换不够。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
