JSON高亮格式化页面显示

高亮CSS定义:

  

JS高亮定义:

    function syntaxHighlight(json) {
        json = json.replace(/&/g, '&').replace(//g, '>');
        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 '' + match + '';
        });
    }

后台返回的json字符串,高亮格式化显示到元素内:

$("#id_show").empty();
var jdata = JSON.stringify(JSON.parse(data), null, 4);
$("#id_show").html("
"+syntaxHighlight(jdata)+"
");

最终效果参考:

JSON高亮格式化页面显示_第1张图片

 

你可能感兴趣的:(JSON高亮格式化页面显示)