data-*属性值中必须转义&、、"、'这5个字符：&最危险，会触发实体识别导致性能陷阱；后4个按引号类型和统一策略要求转义。
data-* 属性里哪些字符必须转义
只有 &、"、'、、<code>> 这 5 个字符在 data-* 属性值中可能破坏 HTML 解析，必须处理。其中：& 最危险——它会触发浏览器实体识别状态机，哪怕后面跟的是非法组合（比如 &foo），解析器也会一直扫描到换行或下一个标签才放弃，造成性能损耗；" 和 ' 只有在和包裹属性的引号类型相同时才需转义（例如 data-filter="price > 100" 里的 " 就不用转，但里面的双引号就得转成 "）； 和 <code>> 虽不被当作标签解析，但为防误用和统一策略，仍建议转义。
手动拼写 HTML 时怎么安全写 data 属性
别靠肉眼判断要不要转——统一用命名实体最稳妥：
-
&→ 必须写成&（顺序第一，否则可能被错认成 <code>） → 写成 <code>，<code>>→ 写成>- 双引号属性内含双引号：写成
"；单引号属性内含单引号：写成' - 避免混用数字实体（如
）和命名实体，容易漏分号或大小写错误（<code><无效）
示例：<div data-query='name="Alice" & age>18'></div> 是错的；正确写法是：<div data-query="name=" alice age>18"></div>。
JavaScript 动态设置 data 属性时的坑
用 element.setAttribute('data-x', str) 看似省事，但它只自动处理引号（把 " 换成 "），不会转义 &、、<code>>。这意味着：
- 如果
str含&foo，最终 HTML 里就是data-x="&foo"，浏览器会尝试解析实体，失败后丢弃整段 -
element.dataset.x或getAttribute('data-x')返回的是解码后的值，不是原始字符串——你无法靠它反推是否漏转了& - 想 100% 安全，得先用函数转义全部 5 个字符，再 setAttribute
推荐轻量转义函数：
function escapeHtml(str) {<br> return str<br> .replace(/&/g, '&')<br> .replace(/, ' .replace(/>/g, '>')<br> .replace(/"/g, '"')<br> .replace(/'/g, ''');<br>}注意顺序：& 必须最先处理。为什么不能只靠 textContent 或 innerText 回填 data 属性
textContent 是纯文本接口，它根本不走 HTML 解析流程，所以没法用来生成合法的 data-* 属性值；innerText 更不可靠——它受 CSS 影响（比如 display: none 的内容不计入），且不同浏览器行为不一致。唯一能复用浏览器原生转义逻辑的方式是：
const temp = document.createElement('div');<br>temp.textContent = str;<br>const escaped = temp.innerHTML;但这只适合低频调用，循环里频繁创建 DOM 会有明显开销。真正容易被忽略的是：data-* 不是“存数据的地方”，而是“让 HTML 结构不崩的逃生通道”。只要里面出现未转义的 &，首屏解析就可能多扫几百个字符——这种延迟在日志表格、筛选面板这类高频渲染场景里，肉眼就能感觉到卡顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
