如何使用jQuery提取包含&quot实体的data属性中的JSON数据

问题根因 #

浏览器解析HTML属性时会自动解码所有HTML实体，你写入的"会被解码为普通双引号"，直接破坏了JSON的双引号闭合规则，导致JSON格式非法：

• jQuery的data()方法仅会对合法JSON自动转为对象，格式非法时直接返回原始字符串
• 直接调用JSON.parse时会因为双引号提前闭合抛出语法错误

解决方案 #

方案1：调整HTML输出逻辑（最推荐） #

输出data-json属性前，先将完整JSON字符串做全量HTML实体转义，浏览器解析属性时解码一次刚好得到合法JSON。
例：如果用PHP输出，写法如下：

<?php
// 原始数据
$rawData = ["t" => "title: \"BB\""];
// 先序列化为JSON字符串，再做HTML实体转义
$encodedJson = htmlspecialchars(json_encode($rawData), ENT_QUOTES);
?>
<div id="tt" data-json='<?= $encodedJson ?>'></div>

按这种写法输出后，直接调用$('#tt').data('json')就能拿到预期的对象，不需要额外处理。

方案2：JS端兼容处理（无法修改HTML时使用） #

如果不能调整上游HTML输出逻辑，可以通过正则修复非法的JSON格式后再解析：

// 获取原始属性值
const rawJsonStr = $('#tt').attr('data-json');
// 替换JSON值内部未转义的双引号
const validJsonStr = rawJsonStr.replace(/title: "([^"]+)"/g, 'title: \\"$1\\"');
// 解析得到对象
const aa1 = JSON.parse(validJsonStr);

内容的提问来源于stack exchange，提问作者Dliv