页面json 格式化+颜色高亮

Posted 2020-09-27 jwentest

背景

应答为json，为了更好的展示在前端页面，需要对其格式化加颜色高亮

 

效果图

 

步骤

js中添加

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 = {a:1, \'b\':\'foo\', c:[false,\'false\',null, \'null\', {d:{e:1.3e5,f:\'1.3e5\'}}]};
var str = JSON.stringify(obj, undefined, 4);

output(str);
output(syntaxHighlight(str));

 

css中添加

pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

 

参考资料

https://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript