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

Shun

将 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": "https://p1.music.126.net/-u3WgIXsFNCW7d8Jy7pCEA==/5921969627395387.jpg" 
        },  
        "scene": "music" 
        }  
      }
      document.getElementById('result').innerHTML = syntaxHighlight(songResJson);
 
    // $('#result').html(syntaxHighlight(songResJson));
  </script>
   
  </body>
</html>

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

[Html/CSS] html格式化输出JSON示例(测试接口)

相关帖子

HTML 表格简介

教你使用HTML/CSS和Three.js的喷火龙小游戏

基于 HTML+CSS+JS 的石头剪刀布游戏

HTML/JS/PHP网站底部获取当前年份代码

html+Js获取当前时间代码

nginx启ssi方法，宝塔面板nginx开启ssi

常用HTML网页跳转的几种方法

CSS3荧光灯文字闪烁动画特效

利用html+js触发弹窗事件

利用HTML、CSS和JS制作随机密码生成器

Shun LV3