HTML代码中data-*属性储存JSON数据的转义方法-html教程-PHP中文网

会，但不是语法错误而是解析失败；需先json.stringify()再html实体编码，读取时可直接json.parse()。

html代码中data-*属性储存json数据的转义方法

data-\* 属性里存 JSON 会直接报错吗？会，但不是语法错误，而是解析失败。浏览器允许 `data-*` 存任意字符串，但一旦你用 `JSON.stringify()` 直接塞进 HTML 属性，里面双引号、斜杠、换行等字符会让 HTML 解析器提前截断或报错——比如 `data-config='{"name":"Alice"}'` 看似正常，但若值含双引号（`"name": "O'Reilly"`）或换行，HTML 就崩了。

关键不是“能不能存”，而是“怎么存才能让 dataset 拿出来还是合法 JSON 字符串”。

最稳妥的转义方式：用 `JSON.stringify()` + HTML 实体编码别手动替换引号或写正则，容易漏。正确做法是两步走：

先用 `JSON.stringify()` 得到标准 JSON 字符串（它自动处理引号、反斜杠、控制字符）

再对这个字符串做 HTML 实体编码，把 `"` → `"`，`&` → `&`， `→ <code>，<code>>` → `>`

示例：

const config = { name: "O'Reilly", tags: ["js", "html"], notes: "line1\nline2" };
const jsonStr = JSON.stringify(config); // {"name":"O'Reilly","tags":["js","html"],"notes":"line1\nline2"}
const encoded = jsonStr
  .replace(/&/g, "&")
  .replace(/"/g, """)
  .replace(/'/g, "'")
  .replace(/, "/g, ">");
// → {"name":"O'Reilly","tags":["js","html"],"notes":"line1\nline2"}
// 注意：单引号用 ' 更安全，因为属性常用双引号包裹

然后写入 HTML：

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

<div data-config=""></div>

读取时怎么还原成对象？不能直接 `JSON.parse(element.dataset.config)` —— 因为 dataset 自动解码 HTML 实体，但不会处理换行、Unicode 转义等。正确流程：

从 `dataset.config` 拿到的是已 HTML 解码的字符串（如 `O'Reilly` 已还原，`\n` 还是字面量 `\n`）

这个字符串仍是合法 JSON，可直接 `JSON.parse()`

但如果原始 JSON 含 Unicode（如中文），`JSON.stringify()` 默认会转成 `\u4f60`，而 HTML 编码不碰它，所以没问题

安全读取代码：

const el = document.querySelector('[data-config]');
try {
  const obj = JSON.parse(el.dataset.config); // ✅ 直接 parse 即可
} catch (e) {
  console.error('Invalid JSON in data-config:', e);
}