4

HTML5data-属性を使用すると、以下の HTML に示すように、JSON を 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>
4

1 に答える 1

8

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>
于 2012-12-04T14:52:25.830 に答える