HTML5 data-* vs jQuery Data API

Convert object literals to JSON literals.

by tokkonoPapa

HTML

<script src="https://raw.github.com/tokkonopapa/JSON-js/master/json2.js"></script>
<p id="test"
    title="JSON literals"
    data-option-a='[1E3]'
    data-option-b='["John"]'
    data-option-c='["John",10]'
    data-option-d='{"name":"John"}'
    data-option-e='{"who":["John",{"age":10}]}'

    title="object literals"
    data-option-f='1E3'
    data-option-g="John"
    data-option-h="['John',10]"
    data-option-i="{name:'John'}"
    data-option-j="{who:['John',{'age':10}]}"

    title="string literals"
    data-option-k=""
    data-option-l="name:John"
    data-option-m="name:John,age:10"

    title="This will cause security issue with eval()."
    data-option-n="{hack:alert(arguments.callee)}"
    data-option-o="{hack:alert(&quot;hello&quot;)}"
>Now Checking ...</p>

<table id="t1" style="visibility:hidden">
    <caption></caption>
    <thead>
        <tr>
            <th rowspan="2">attribute</th>
            <th colspan="3">$.data()</th>
            <th colspan="2">$.attr()</th>
            <th colspan="2">jsonize</th>
        </tr>
        <tr>
            <th>key</th>
            <th>type</th>
            <th>value</th>
            <th>$.parseJSON</th>
            <th>eval((...))</th>
            <th>type</th>
            <th>value</th>
        </tr>
    </thead>
    <tbody id="r1"></tbody>
</table>

CSS

body {
    background-color: #ddd;
    font-size: 14px;
    font-family: Monaco, monospace, "Lucida Console", "Courier New", Courier;
}
table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px black solid;
}
th, td {
    padding: 0.1em 1em;
}
td:first-child {
    text-align: left;
}
td {
    text-align: right;
}

JavaScript

function convKey(att) {
//  return att ? $.camelCase(att.replace(/^data-/, '')) : undefined;
/*  return att ? att.replace(/^data-/, '').replace(/-[^\-]/g, function(m) {
        return m.charAt(1).toUpperCase();
    }) : undefined;*/
    // The key is primary cached as it is inside jQuery.
    return att ? att.replace(/^data-/, '') : undefined;
}

function getType(elm, att) {
    try {
        return typeof elm.data(att);
    } catch (e) {
        return 'error'; //e;
    }
}

function getData(elm, att) {
    try {
        var j = elm.data(att);
        return JSON.stringify(j);
//      return j;
    } catch (e) {
        return 'error'; //e;
    }
}

function getJson(elm, att) {
    try {
        var j = $.parseJSON(elm.attr(att));
        return JSON.stringify(j);
//      return j;
    } catch (e) {
        return 'error'; //e;
    }
}

function getEval(elm, att) {
    try {
        var j = eval('(' + elm.attr(att) + ')');
        return JSON.stringify(j);
//      return j;
    } catch (e) {
        return 'error'; //e;
    }
}

var _jsonize_brace = /^[{\[]/,
    _jsonize_token = /[^,:{}\[\]]+/g,
    _jsonize_quote = /^['"](.*)['"]$/,
    _jsonize_escap = /(["])/g;

function jsonize(data) {
    if (typeof data === 'string') {
        var str = $.trim(data);
        if (_jsonize_brace.test(str) === false) {
            str = '{' + str + '}';
        }
        str = str.replace(_jsonize_token, function (a) {
            a = $.trim(a);
            return '' === a ||
                'true' === a || 'false' === a || 'null' === a ||
                (!isNaN(parseFloat(a)) && isFinite(a)) ?
                a : '"' + a.replace(_jsonize_quote, '$1')
                           .replace(_jsonize_escap, '\\$1') + '"';
        });
        try {
            data = $.parseJSON(str);
        } catch (e) { /* alert(e); */ }
    }
    return data;
}

function addCol(tr, txt) {
    var td;
    td = document.createElement('td');
    td.appendChild(document.createTextNode(txt));
   ...