title: Escaping quotes and html in a data- attribute JSON object
body: <p>Using the HTML5 <code>data-</code> attribute, one can store JSON in HTML as shown in the HTML below. This works great with string key:value pairs but I can't figure out how to make the values include special characters or HTML. </p>
  
  <p>The part of the JSON object that is giving problems is this: <code>Can't vote on &lt;b&gt;own&lt;/b&gt; review</code> (also interested in more complicated HTML chunks like this: <code>&lt;span style="text-decoration:underline" own&lt;/span&gt;</code>. Here's a <a href="http://jsfiddle.net/trpeters1/aNTZ5/9/" rel="noreferrer">JSFiddle for the code below.</a> </p>
  
  <p>JS:</p>
  
  <pre><code>$('button').on('click', function () {
    var $this=$(this), data=$this.data('data');
       $('#output').html(data.message);
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button type='button' data-data='{"type": "voting", "message": "Can't vote on &lt;span style="text-decoration:underline" own&lt;/span&gt; review"}'&gt;&lt;/button&gt;
  &lt;div id='output'&gt;&lt;/div&gt;
  </code></pre>