html显示json接口数据,html格式化输出JSON示例(测试接口)

将 json 数据以美观的缩进格式显示出来，借助最简单的 JSON.stringify 函数就可以了，因为此函数还有不常用的后面2个参数。

见MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify 的描述。

示例代码如下：

hello

pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }

.string { color: green; }

.number { color: darkorange; }

.boolean { color: blue; }

.null { color: magenta; }

.key { color: red; }

function syntaxHighlight(json) {

if (typeof json != 'string') {

json = JSON.stringify(json, undefined, 2);

}

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 + '';

});

}

var songResJson={

"service": "ALL",

"qt": 581,

"content": {

"answer": {

"song": "如果缘只到遇见",

"album": "如果缘只到遇见",

"artist": "吴奇隆 严艺丹",

"pic_url": "http://p1.music.126.net/-u3WgIXsFNCW7d8Jy7pCEA==/5921969627395387.jpg"

},

"scene": "music"

}

}

document.getElementById('result').innerHTML = syntaxHighlight(songResJson);

// $('#result').html(syntaxHighlight(songResJson));

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。