必须转义的只有5个字符：<、>、&、"、'；其余Unicode字符在UTF-8编码及正确meta声明下可直接使用，无需转义。
HTML 转义不是把所有奇怪字符都“编码一遍”就安全了，真正必须转的只有 5 个：<、>、&、"、'。其他 Unicode 字符（中文、emoji、©、€）只要文件是 UTF-8 编码且 <meta charset="utf-8"> 声明正确，直接写进去就能显示，强行转反而引入冗余和可读性问题。
哪些字符必须转义？只这 5 个
浏览器解析 HTML 时，仅这 5 个字符有语法意义，不转义会导致解析错误或 XSS：
-
<：不转义会被当成标签起始，比如userInput = "a 直接插入会截断后续内容 -
>：多数情况可省，但在<script>内或属性值中建议转，避免干扰 JS 解析 -
&：最易被忽略；不转义会导致后续实体（如©）被误解析成乱码 -
"：仅在双引号包围的属性值中必要，例如title="他说："你好""→ 必须写成title="他说:"你好"" -
'：仅在单引号包围的属性值中必要，但 IE6/7 不支持，更推荐用'或直接改用双引号包属性
为什么中文、emoji、© 不用转？
它们属于合法的 Unicode 字符，HTML5 明确允许在文本节点和大多数属性值中直接使用，前提是：
- HTML 文件本身以 UTF-8 保存（编辑器设置别选 ANSI 或 GBK）
- 页面头部有
<meta charset="utf-8">（无此声明时，浏览器可能按系统默认编码解析，导致中文变 ） - 不放在
href、src等 URL 上下文中（那里需用%E4%B8%AD这类 percent-encoding）
强行把 © 写成 © 或 ©，除了增加体积和降低可读性，对现代浏览器毫无益处——除非你还在维护 IE6/7。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
常见错误：innerHTML 拼接 + 手动 replace
很多人写 el.innerHTML = '<div>' + escapeHtml(userInput) + '</div>'，以为加了转义就安全。但问题在于：
-
escapeHtml()如果漏掉&，<script>就可能被触发 - 如果函数多转了不该转的字符（比如把中文也
中），内容不可读、SEO 受损、复制粘贴出乱码 - 更根本的是：
innerHTML本身是危险通道；应优先用textContent插入纯文本，或用模板引擎 / 框架的自动转义机制
一个最小可用的 escapeHtml 函数只需覆盖那 5 个字符，不多不少：
function escapeHtml(str) {
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
属性值里引号嵌套怎么处理？
这是最容易翻车的场景。记住一条铁律：属性值用什么引号包裹，就只转义那种引号内部的同类型符号。
- 双引号属性：
data-info="他输入了 <script>"→<和&必须转，"也要转（因为外层是"） - 单引号属性：
data-info='他说："OK"'→ 外层是'，所以里面的'必须转，而"不用转 - 最稳妥做法：统一用双引号包属性，内容里出现双引号时转成
"；避免混用或动态拼接引号类型
别试图用 JSON.stringify() 替代 HTML 转义——它生成的是 JavaScript 字符串字面量，不是 HTML 实体，直接塞进 innerHTML 仍可能执行脚本。
