javascript - 在数据属性 JSON 对象中转义引号和 html

Question

使用 HTML5data-属性，可以将 JSON 存储在 HTML 中，如下面的 HTML 所示。这适用于字符串键：值对，但我不知道如何使值包含特殊字符或 HTML。

给出问题的 JSON 对象部分是这样的：（Can't vote on <b>own</b> review也对更复杂的 HTML 块感兴趣，例如：<span style="text-decoration:underline" own</span>。这是下面代码的 JSFiddle。

JS：

$('button').on('click', function () {
  var $this=$(this), data=$this.data('data');
     $('#output').html(data.message);
});

HTML：

<button type='button' data-data='{"type": "voting", "message": "Can't vote on <span style="text-decoration:underline" own</span> review"}'></button>
<div id='output'></div>

Answer 1

您需要转义 HTML，特别是在此示例中，&以及用于引用属性值的字符（或"或'）：

<button type='button' data-data='{"type": "voting", "message": "Can&#39;t vote on <b>own</b> review"}'></button>

或者：

<button type='button' data-data='{"type": "voting", "message": "Can&#39;t vote on <span style=&#39;text-decoration:underline&#39;>own</span> review"}'></button>