必须转义&、、"、'这5个字符；不转会导致html解析崩溃、xss漏洞或排版错乱，如&未闭合会丢弃后续内容，引发标签误解析，"和'在属性中导致提前截断。
哪些字符必须转义，不转会出什么问题
HTML里真正必须转义的只有 &、、<code>>、"、' 这 5 个字符。其他符号（比如 ©、¥、中文、emoji）在 UTF-8 编码下可直接写，不转不会破坏 DOM 或触发 XSS。
不转这 5 个的后果很具体：
出现在文本中，浏览器可能把它当标签开头，导致后续内容被吞掉或结构错乱-
&单独出现时，解析器会等待后续字母组成实体（如©），若等不到分号，可能报错；若等到了但不是合法实体（如&xyz;），部分浏览器会原样显示，部分会截断 -
"在双引号属性值里未转义，比如title="User's name"，单引号会让属性提前结束，后面变成裸 HTML -
'在单引号属性中同理，但注意'在 IE8 及更早版本不支持，稳妥起见用'
怎么写才安全：命名实体优先，顺序不能错
推荐统一用命名实体：、<code>>、&、"、'。语义清晰、兼容性好、不易手误。
特别注意：& 本身含 &，所以必须第一个替换——否则你把 替成 <code> 后，新生成的 <code>& 又会被当成实体起始符，再被二次处理。
常见错误写法：
- 混用命名和数字编码，比如
和 <code> 并存，可读性差，也容易漏转 - 在 JS 字符串里写
" 却忘了 JS 层还要反斜杠转义，实际得写 <code>"（双引号内）或 <code>'（单引号内） - 服务端已转义的数据，前端再用
innerHTML插入时又调一次转义函数，结果用户看到的是字面量<
动态插入时别拼字符串，用 textContent 最省心
前端渲染用户输入，最简单安全的做法是不用 innerHTML，改用 textContent：
const el = document.getElementById('output');
el.textContent = 'Tom & Jerry <script>alert(1)</script>'; // 安全，原样显示
如果非得保留部分 HTML（比如富文本摘要），不要自己写正则替换，优先用 DOMPurify.sanitize()；或者逐个创建节点：
const div = document.createElement('div');
div.textContent = 'Price: ';
const span = document.createElement('span');
span.textContent = '¥199';
div.appendChild(span); // 避免任何解析风险
手动正则转义函数必须保证 & 第一顺位，且要全局替换：
function escapeHtml(str) {
return str
.replace(/&/g, '&')
.replace(/, '/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
JSON 嵌入 script 标签时，& 和 是双重陷阱
像 <script>var data = <%= json %></script> 这种写法，光做 HTML 转义不够：
-
&要转成&，否则可能触发实体解析 -
字符串一旦出现在innerHTML或 script 内容里，浏览器会在第一个出现处就关闭 script 块——哪怕它在 JSON 字符串值中
正确做法是破坏闭合标记，例如把 写成 或 （JS 字符串中用反斜杠打断）。
最容易被忽略的是：模板引擎（如 Jinja2、Twig）默认转义，但 {{ var|safe }} 或 {{ var|raw }} 会绕过——这类标记就是 XSS 温床，必须人工确认内容可信。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
