html格式化输出JSON示例(测试接口)

来源：动视网责编：小采时间：2020-11-27 14:43:44

html格式化输出JSON示例(测试接口)

html格式化输出JSON示例(测试接口):将 json 数据以美观的缩进格式显示出来，借助最简单的 JSON.stringify 函数就可以了，因为此函数还有不常用的后面2个参数。见MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/

推荐度：

点击下载本文 文档为doc格式

导读html格式化输出JSON示例(测试接口):将 json 数据以美观的缩进格式显示出来，借助最简单的 JSON.stringify 函数就可以了，因为此函数还有不常用的后面2个参数。见MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/

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

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

示例代码如下：

<html>

 <head>

 <meta charset="utf-8" />

 

 <title>hello</title>

 

 <style>

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

 .string { color: green; }

 .number { color: darkorange; }

 .boolean { color: blue; }

 .null { color: magenta; }

 .key { color: red; }

 </style>

 <script type="text/javascript">

 function syntaxHighlight(json) {

 if (typeof json != 'string') {

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

 }

 json = json.replace(/&/g, '&').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 '<span class="' + cls + '">' + match + '</span>';

 });

 }

 

 </script>

 </head>

 <body>

 

 <pre id="result">

 

 </pre>

 <script type="text/javascript">

 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));

 </script>

 

 </body>

</html>

html格式化输出JSON示例(测试接口)

推荐度：

点击下载本文 文档为doc格式

标签： html 示例 json

热门焦点

html格式化输出JSON示例(测试接口)

html格式化输出JSON示例(测试接口)

html格式化输出JSON示例(测试接口)

最新推荐

猜你喜欢

热门推荐