簡單一招實現json數據可視化 - lvdabao－IT工程師數位筆記本

文章出處

開發一個內部功能時碰到的需求，要把json數據在頁面上展示出來，平時瀏覽器會安裝jsonView這樣的擴展來看json數據，但是程序要用到的話該怎么辦呢？今天在網上搜索的時候，發現了這個小技巧，分享一下。

要用到的核心是JSON.stringify這個函數，沒想到吧，平時我們只把它用來序列號json數據。但是這個stringify是有三個參數的，

JSON.stringify(value [, replacer] [, space])

，具體描述請看這里：https://msdn.microsoft.com/library/cc836459(v=vs.94).aspx

我們要用到的就是這第三個參數，它可以指定在生成的字符串中加多少空格，從而生成有一定格式的字符串。生成的字符串我們可以放在<pre>標簽中，這樣就能很好的顯示縮進。然后呢，為了讓生成的數據有高亮效果，我們還可以寫一個簡單的高亮函數。基本就是這么個原理啦，請看代碼實現：

function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}

function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

var obj = {
    num: 1234,
    str: '字符串',
    arr: [1,2,3,4,5,6],
    obj: {
        name: 'tom',
        age: 10,
        like: ['a', 'b']
    }
};
var str = JSON.stringify(obj, undefined, 4);

output(syntaxHighlight(str));