在实现HTML特殊字符转义（如, ", &）时，若未按特定顺序执行替换，会导致已转义的字符被二次污染——尤其是&必须最先替换为&，否则后续生成的
在实现html特殊字符转义（如``, `"`, `&`）时，若未按特定顺序执行替换，会导致已转义的字符被二次污染——尤其是`&`必须最先替换为`&`，否则后续生成的`
这是前端安全编码中一个经典且易被忽视的细节：转义操作不是独立的，而是存在依赖关系。
以 Codewars 题目 Safen User Input Part I - htmlspecialchars 为例，目标是将用户输入中的四个危险字符安全转义为对应 HTML 实体：
→-
>→> -
"→" -
&→&
表面看，这四次 .replaceAll() 似乎可任意排序。但关键在于：、>、" 这些结果本身都以 & 开头。如果 & 的替换放在最后，那么此前生成的 中的 & 将被再次替换为 &，最终变成 —— 这是一个无效的 HTML 实体，浏览器会原样显示为文字 ，而非期望的 。
✅ 正确顺序（推荐）：
function htmlspecialchars(formData) {
return formData
.replaceAll('&', '&') // 第一步：先“封住”所有原始 &，避免污染
.replaceAll('', '>')
.replaceAll('"', '"');
}
❌ 错误顺序（导致问题）：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
function htmlspecialchars(formData) {
return formData
.replaceAll('', '>') // 同样引入新 &
.replaceAll('"', '"') // 同样引入新 &
.replaceAll('&', '&'); // 最后一步把所有 &（含刚生成的）全替成 &
}
// 输入: "<script>alert('&')</script>"
// 输出: "<script>alert('&')</script>"
// → 完全失效且语义错乱
? 核心原则：
&是 HTML 实体的起始符号，必须最先转义，确保后续生成的任何实体中的&都已是安全的&，不再参与后续替换。
⚠️ 注意事项：
- 不要使用正则全局替换（如
/&/g）替代.replaceAll()，二者行为一致，但顺序逻辑不变； - 若需支持更多字符（如
'→'），同样需确保其不引入新的&或依赖未转义的&； - 在真实项目中，建议直接使用成熟库（如
he）或浏览器原生 API（如DOMPurify），避免手动实现带来的安全隐患。
总结：看似简单的字符串替换，实则是有向依赖链。牢记「& 优先」这一铁律，是写出健壮 HTML 转义函数的第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
