必须对html属性值中的双引号、单引号及&符号进行转义，优先使用setattribute自动处理引号，但需手动转义&为&，防止xss和属性截断。
直接提取 HTML 文本时遇到 、<code>&、" 等符号，不是显示错乱就是解析中断——根本原因不是字符“特殊”，而是你没在提取前做转义预处理。
提取前必须先转义，而不是提取后再修复
很多开发者习惯用 innerHTML 或正则直接抓取内容，再对结果做替换。这已经晚了：浏览器解析器在构建 DOM 时就已按未转义的 & 和 切分节点，原始字符串可能已被截断或重组。比如 <code>©2026 若未提前转义，© 被识别为实体，但若写成 ©2026（漏了分号），整个片段会被丢弃或报 Unclosed entity 错误。
- 服务端吐出的 HTML 字符串，前端拿到后应立即调用转义函数，再塞进
textContent或插入 DOM - 用
DOMParser解析 HTML 片段时，它不自动转义——你仍需对parser.parseFromString(htmlStr, 'text/html')得到的文本节点内容手动处理 - 从
textarea或input读取用户输入时，值本身是纯文本，但一旦拼进 HTML 字符串（如`<div>${userInput}</div>`），就必须转义
escapeHtml() 函数必须按顺序处理 &、、<code>>、"、'
常见错误是只转 和 <code>>，漏掉 &；或顺序颠倒，导致 变成 <code><（双层编码）。标准实现必须严格遵循这个顺序：
-
str.replace(/&/g, '&')—— 第一步，否则后续替换生成的&会被二次处理 .replace(/, '.replace(/>/g, '>')-
.replace(/"/g, '"')—— 属性值中双引号包围时必需 -
.replace(/'/g, ''')—— 单引号属性值或 IE8 兼容场景下更稳妥
别用 innerHTML + textContent 组合来“偷懒”：创建临时元素再读 innerHTML 虽能间接转义，但在循环中高频调用会显著拖慢性能。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
表格、title、data-* 属性里的引号最容易漏转
表格单元格内容看似普通，但 th 的 title 属性、td 的 data-filter 值，本质仍是 HTML 属性上下文。未转义的 " 或 ' 会提前闭合属性值，后面的内容变成裸 HTML，可能触发 XSS。
<th title="User's input: <script>alert(1)</script>"> → 必须写成 <code>title="User's input: <script>alert(1)</script>"<td data-price="5 & 10"> → <code>&必须转为&，否则& 10被当无效实体，属性值被截断- 动态设置属性时，优先用
el.setAttribute('title', str)，它会自动处理引号边界，但不会转&和，仍需前置转义 - 安全做法是破坏闭合标签：
（斜杠转义）或用 CDATA 包裹（XML 兼容场景） - 更可靠的是避免内联 JSON：改用
data-属性或 API 异步加载 - 如果必须内联，确保 JSON 序列化时对
做额外逃逸，而不仅是通用 HTML 转义
JSON 嵌入 HTML 时，
把 JSON 数据塞进 <script>var data = <%= json %></script> 是高危操作。即使 JSON 字符串本身已 HTML 转义，只要里面含 ，浏览器解析器会在第一个出现处直接结束脚本块——后续 JS 代码全失效，甚至引发语法错误。
真正麻烦的从来不是怎么转，而是哪些上下文需要转、哪些已经由框架或 API 代劳——比如 React 的 {userInput} 默认走 textContent，但 dangerouslySetInnerHTML 就得自己兜底；Vue 的 {{ userInput }} 安全，v-html 就必须先过 escapeHtml()。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
