title: How to set JSON format to HTML5 data attributes in the jQuery
body: <p>I'm trying these HTML</p>
  
  <pre><code>&lt;div data-params="{a: 1, b: '2'}" id="TEST1"&gt;&lt;/div&gt;
  &lt;div data-params='{"a": 1, "b": "2"}' id="TEST2"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Then I use data() method in the jQuery</p>
  
  <pre><code>$('#TEST1').data('params'); //return a string
  $('#TEST2').data('params'); //return a object
  </code></pre>
  
  <p>But TEST1 it's not a return object, but a string, it can only return object TEST2.
  But I want to get a object by TEST1, How do I do it?</p>
  
  <p>=============</p>
  
  <p>Finally, I choose to write a function to achieve their own needs</p>
  
  <pre><code>$.fn.data2 = function(key, value)
  {
      if (value === undefined) 
      {
          var data = $(this).data(key);
          if (typeof(data) === 'string') 
          {
              var _data = data.replace(/^[\s\r\n]*/g, '').replace(/[\s\r\n]*$/g, '');
              if (_data.match(/\{.*\}/) || _data.match(/\[.*\]/)) {
                  try {
                      _data = (new Function( 'return ' + data ))();
                      if (typeof(_data) == 'object') {
                          $(this).data(key, _data);
                          data = _data;
                      }
                  } catch(ex) {}
              }
          }
          return data;
      }
      return $(this).data(key, value);
  };
  </code></pre>