转义数据属性JSON对象中的引号和html

时间:2012-12-04 14:45:28

标签: javascript jquery html html5 escaping

使用HTML5 data-属性,可以将HTML存储在HTML中,如下面的HTML所示。这适用于字符串键:值对,但我无法弄清楚如何使值包括特殊字符或HTML。

提出问题的JSON对象部分是这样的:Can't vote on <b>own</b> review(也对更复杂的HTML块感兴趣:<span style="text-decoration:underline" own</span>。这是JSFiddle for the code below.

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>

1 个答案:

答案 0 :(得分:6)

您需要escape the 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>