HTML 实体在 JSON 从数据属性读取时转换为其字符值

Question

我正在尝试访问数据属性中的字符串化 JSON 数组。但是，当我使用 $(...).data('whatever') 或 $(...).attr('data-whatever') 获取值时，JSON 内容中的 HTML 个实体（例如 "）将转换为其字符表示（例如 "）导致 JSON 字符串在解析时被误解。

例如，如果我的数据属性的值为["Oberlin City Club: Opera Preview","Documentary Screening "Still Dreaming: Frances Walker at 93""]，则读取此为$(...).data() returns ["Oberlin City Club: Opera Preview","Documentary Screening "Still Dreaming: Frances Walker at 93""]。为什么 JavaScript 将 " 转换为 "？如何在不将 " 转换为 " 的情况下读取数据属性？

console.log($('div').attr('data-titles'));
console.log(JSON.parse($('div').attr('data-titles')));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-titles='["Oberlin City Club: Opera Preview","Documentary Screening &quot;Still Dreaming: Frances Walker at 93&quot;"]'></div>

Answer 1

Why did JavaScript convert " into "?

在这种情况下，它没有。通过在您的响应中使用 "，浏览器将其解析为 "，这就是放入属性中的内容。这是因为您使用了 html 实体。

An HTML entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;) Entity ^MDN

因此，JavaScript 没有机会补救这种情况。您需要找出一种在模板引擎中以不同方式呈现 " 的方法，理想情况下 double-encoding 带有 " 的引号（如 所述）。