必须转义的字符是&、"、'、<、>这5个；其中&最危险，会触发实体识别状态机导致性能陷阱，"和'仅在与包裹引号相同时需转义，<和>虽不解析为标签也建议统一转义。
data-* 属性值里哪些字符必须转义
只有 &、"、'、、<code>> 这 5 个字符在 data-* 属性值中可能破坏 HTML 结构，必须处理。其中 & 最危险——它会触发浏览器实体识别状态机，导致解析器反复扫描直到遇到 ; 或标签结束，既出错又拖慢渲染。
常见错误现象：data-filter="price > 100" 渲染后变成 data-filter="price （后面被截断）；data-title="User's input" 让属性提前闭合，后续内容变成裸文本甚至可执行脚本。
-
"和'仅在与包裹引号类型相同时才需转义（如title="他说:"你好""→ 必须写成title="他说:"你好""） 和 <code>>虽不被解析为标签，但不转义易引发误读或 XSS 风险，建议统一转义- 服务端输出前，对整个值做 HTML 实体编码（如用 PHP 的
htmlspecialchars($val, ENT_QUOTES, 'UTF-8')）比前端拼接更可靠
dataset 读取含特殊字符的 data-* 值为什么失败
dataset 只认全小写+连字符命名的 data-* 属性，且自动做驼峰转换。一旦属性名含数字、大写字母、下划线或连续连字符，dataset 就静默失效——不报错，也不返回值，只返回 undefined。
常见错误现象：data-api-key="abc123" 可读作 el.dataset.apiKey；但 data-api_key="abc123" 或 data-API-Key="abc123" 在 dataset 中完全不可见；data-2024-config 无法通过 dataset.2024Config 访问（语法错误），只能用 dataset["2024Config"]。
立即学习“前端免费学习笔记（深入）”；
- 含下划线、点号、冒号的属性名（如
data-user_name）必须用getAttribute('data-user_name') - 值中带前后空格或换行符时，
dataset会自动trim()，而getAttribute()返回原始字符串 - IE11 对连字符转驼峰有兼容性 bug（
data-user-id的dataset.userId可能取不到），此时降级用getAttribute更稳
setAttribute 写入 data-* 时要不要手动转义
用 element.setAttribute('data-xxx', value) 写入时，浏览器**不会自动转义** &、 等字符。如果 <code>value 是用户输入或服务端动态拼接的字符串，且可能含这 5 个危险字符，就必须在调用前自行转义。
常见错误现象：JS 动态写入 el.setAttribute('data-desc', 'price & tax')，结果生成的 HTML 是 data-desc="price & tax"，后续被解析为实体起点，造成截断或 XSS。
- 不要依赖
setAttribute的“安全性”，它只是原样设置字符串 - 推荐在服务端或 JS 入口层统一处理转义，例如用正则
str.replace(/([&'"])/g, (c) => `${c.charCodeAt(0)};`) - 若值是 JSON 字符串（如
{"count":10}），先JSON.stringify()，再整体 HTML 编码，否则JSON.parse(el.getAttribute('data-config'))易因未转义的"报SyntaxError
getAttribute 读取后还要不要解码
getAttribute() 返回的是**已解码后的字符串**，不是原始 HTML 实体。比如 data-value="a<b & c"，调用 el.getAttribute('data-value') 得到的是 "a<b c>，而不是 <code>"a<b & c"。
这意味着你无法靠 getAttribute() 判断原始 HTML 里是否用了实体；也意味着如果你需要把值再塞回另一个属性或插入 innerHTML，得重新考虑是否要转义——因为此时它已是纯文本，不含实体标记。
- 想比对原始输入？只能从
el.outerHTML或服务端源头拿未解析版本 - 用
dataset访问自定义属性时行为一致——也是解码后值 - 空格类实体（如
getAttribute()返回值中分别变成 U+00A0 和 U+0020，语义不同，注意区分
真正容易被忽略的是：所有 data-* 属性都明文暴露在 HTML 源码和 DevTools 中，哪怕你转义了 & 和 ，也无法隐藏内容本身。别存 token、手机号、密码——这不是转义能解决的问题。
