如何使用jQuery json从数据属性中提取"?



我将JSON存储在data属性中,其中包含&quot:

<div id="tt" data-json='{"t":"title: &quot;BB&quot;"}'></div>

我得到的data-json值与jQuery:

aa1 = $('#tt').data('json');

然而,我得到一个字符串aa1,而不是我所期望的对象。如果我从JSON中删除&quot,那么我在aa1中得到一个对象。

如果我这样做:

aa1_str = $('#tt').attr('data-json');
aa1 = JSON.parse(aa1_str);

我得到一个错误在JSON.parse:

Uncaught SyntaxError: JSON中位置14的Unexpected token B

$('#tt').attr('data-json')返回一个已解析的字符串,其中&quot被替换为"

如何从包含&quot的JSON字符串中正确提取数据?

问题是在jQuery解析对象之前,&quot;HTML实体被解码为"。这将值转换为{"t":"title: "BB""},这不是一个有效的JSON字符串,因此jQuery不会为您将其解析为对象并返回原始字符串。

为了纠正这个问题,您可以使用其他HTML实体来编码引号,例如&ldquo;&rdquo;&#8220;&#8221;,我在下面的工作示例中使用了后者:

let aa1 = $('#tt').data('json');
console.log(aa1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tt" data-json='{"t":"title: &#8220;BB&#8221;"}'></div>

话虽如此,我还是建议采用不同的方法;完全不需要引号。只需在title属性中返回BB值,并在必要时将输出格式化为在UI中包含title:。例如:

<div id="tt" data-json='{"title": "BB"}'></div>

也许你可以使用decodeuriccomponent

https://www.w3schools.com/jsref/jsref_decodeuricomponent.asp

aa1_str = $('#tt').attr('data-json');
var uri_enc = encodeURIComponent(aa1_str); // before you save the content
console.log(uri_enc);
var uri_dec = decodeURIComponent(aa1_str); // before you display the content
$("#test").text(uri_dec);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tt" data-json='{"t":"title: &quot;BB&quot;"}'></div>
<div id="test"></div>

我认为问题在于属性中的语法。据我所知,JavaScript无法区分"&quot;。因此,当您获得该属性时,返回的是:{"t":"title: "BB""}。这不能是一个有效的JSON。我的建议是使用简单的反斜杠而不是特殊字符转义来转义。

<div id="tt" data-json='{"t":"title: "BB""}'></div>

JQUERY

var aa1 = $('#tt').attr('data-json');
var jsonAa1 = JSON.parse(aa1);

现在jsonAa1是一个有效的JSON对象,您可以随意使用。

最新更新