必须先转义&再处理，因为&是html实体起始符，若顺序错误（如先转
直接显示 HTML 源码（比如在代码块、文档预览或用户评论中）时，、<code>>、& 这几个字符不转义，浏览器就会当成标签或实体解析，轻则内容错乱，重则触发 XSS。必须转义，且顺序不能错。
为什么必须先转义 & 再处理其他字符
因为 & 是 HTML 实体的起始符。如果先转 得到 <code><，再转 &，就会变成 —— 二次转义，最终页面显示的是字面量 <code>< 而不是 。
- 正确顺序：
.replace(/&/g, '&').replace(/, '/g, '>').replace(/"/g, '"').replace(/'/g, ''') - 错误示例：
'<div>A&B</div>'.replace(/, ' → <code><div>A&B</div> - 服务端模板（如 Django、Jinja2）通常自动处理，但 JS 动态插入时必须手动控制顺序
innerText + innerHTML 是最简可靠的前端转义方式
利用浏览器原生解析逻辑，避开正则遗漏和顺序陷阱，适合临时、小量文本转义。
- 写法固定：
const temp = document.createElement('div'); temp.innerText = rawStr; const escaped = temp.innerHTML; - 它会自动处理
&、、<code>>、"、'，无需你写映射表 - 注意：不处理
©这类“展示型”实体 —— 它只转义“有解析风险”的那 5 个核心字符 - 性能差于正则，别在循环里反复调用；大量文本建议用
DOMParser或服务端做
哪些字符必须转义？就这 5 个
不是所有符号都需要转，只有可能破坏 HTML 结构或引发安全问题的才强制转义。其余如 ©、 属于“语义增强”，不转不影响解析，但影响显示效果。
→ <code><（防止被当标签开头）-
>→>（防止闭合标签被误判） -
&→&（防止后续字符被当实体解析） -
"→"（用于属性值内，避免提前截断） -
'→'（同上，尤其在单引号包裹的属性中）
像 、©、× 这些，是“你想让它显示成什么”，而不是“不转会出错”。它们属于内容表达层，不是安全防护层。
用 DOMParser 处理嵌套或含结构的字符串更稳妥
当原始字符串本身含 HTML 标签（比如用户提交了一段带格式的富文本），又只想转义其中的纯文本部分，innerText 方式会把整个结构扁平化丢弃。这时要用 DOMParser 提取文本节点再序列化。
- 示例：
const doc = new DOMParser().parseFromString('<p>Hello & World</p>', 'text/html'); - 然后遍历所有
Text节点，对node.textContent单独转义，再拼回 DOM - 比正则健壮：能正确处理
、<code> 混用，或 <code>&这类已转义内容，避免重复转义 - 兼容性注意：IE 不支持
DOMParser，需 fallback 到正则或 polyfill
真正容易被忽略的，是混合场景：比如后端返回的 JSON 字段里既有用户输入（需转义），又有服务端注入的 HTML 片段（不该再转）。这时候不能无脑全量 escape，得区分数据来源和渲染上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
