将 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( 测试接口)的更多相关文章

  1. Java - 格式化输出JSON字符串的两种方式

    目录 1 使用阿里的fastjson 1.1 项目的pom.xml依赖 1.2 Java示例代码 2 使用谷歌的gson 2.1 项目的pom.xml依赖 2.2 Java示例代码 1 使用阿里的fa ...

  2. 格式化输出Json对象

    1.调用方式: alert(JsonUti.convertToString(jsonObj)); //jsonObj为json对象. 2.格式化输出Json对象方法定义: var JsonUti = ...

  3. 【Python】格式化输出json

    参考文档: Python JSON JSON 函数 使用 JSON 函数需要导入 json 库:import json. 函数 描述 json.dumps  将 Python 对象编码成 JSON 字 ...

  4. nodejs写入json文件，格式化输出json的方法

    假如我需要把data序列化成json字符串,然后写入data.json文件中,代码如下: let str = JSON.stringify(data) fs.writeFile('data.json' ...

  5. 在html中怎么格式化输出json字符串

    #今天的项目用到,看俊哥找到,特此记录下来 步骤: 1.在html页面中输入下面的标签,必须是在pre标签内输出格式才会生效: <pre id="songReqJson"&g ...

  6. Postman Json测试接口

    当传递Json数据时: 1.必须添加http头:content-type:application/json,否则会报错(后台取不到相对应的值) 注意:如果服务端只支持UTF-8,但程序未对提交数据进行 ...

  7. fastjson格式化输出内容

    引入fastjson <!--fastjson--><dependency> <groupId>com.alibaba</groupId> <ar ...

  8. net.sf.json日期类型格式化输出

    net.sf.json 日期类型格式化输出 Date, Timestamp ; 编写工具类 package cn.jorcen.commons.util; import java.text.DateF ...

  9. SpringBoot中使用Fastjson/Jackson对JSON序列化格式化输出的若干问题

    来源 :https://my.oschina.net/Adven/blog/3036567 使用springboot-web编写rest接口,接口需要返回json数据,目前国内比较常用的fastjso ...

随机推荐

  1. jquery设置html5音量的方法

    jquery设置html5音量的方法<pre> setTimeout(function() { alert(1); $('#music1')[0].volume = 0; setTimeo ...

  2. H5+app，自动更新后自动删除安装包

    H5+app 自动删除安装包 一.前言 之前做好的app自动更新,遗留下了一个问题,就是自动更新后安装包没有自行删除掉. 好像现在的手机的系统是有安装完自动清理安装包的.想我这个H5+的app安装完后 ...

  3. layer弹框的上面各个属性 －可配置

    <script type="text/javascript"> 12 //eg 13 layer.open({ 14 title:"标题信息提示", ...

  4. 015.Kubernetes二进制部署所有节点kubelet

    一 部署 kubelet kubelet 运行在每个 worker 节点上,接收 kube-apiserver 发送的请求,管理 Pod 容器,执行交互式命令,如 exec.run.logs 等. k ...

  5. 『嗨威说』算法设计与分析 - 贪心算法思想小结（HDU 2088 Box of Bricks）

    本文索引目录: 一.贪心算法的基本思想以及个人理解 二.汽车加油问题的贪心选择性质 三.一道贪心算法题点拨升华贪心思想 四.结对编程情况 一.贪心算法的基本思想以及个人理解: 1.1 基本概念: 首先 ...

  6. 微信小程序this.data和this.setData({})的区别

    this.data.xx是用来获取页面data对象的----------只是js(逻辑层)数据的更改: this.setData是用来更新界面的---------用于更新view层的.

  7. count的一些用法

    count(*)包括了所有的列,相当于行数,在统计结果的时候,不会忽略列值为NULL  count(1)包括了所有列,用1代表代码行,在统计结果的时候,不会忽略列值为NULL  count(列名)只包 ...

  8. php如何在mysql里批量插入数据

    假如说我有这样一个表,我想往这个表里面插入大量数据 CREATE TABLE IF NOT EXISTS `user_info` ( `id` int(11) NOT NULL AUTO_INCREM ...

  9. 构建 DNS 主从复制服务器

    一.主节点配置 1.yum install bind -y 安装 DNS 服务 2.vim /etc/named.conf 编辑 DNS 的配置文件 3.named-checkconf 检查配置文件 ...

  10. js-程序结构

    程序结构: 1.顺序结构(主体结构):自上而下,逐行实行: 2.分支(选择)结构:if语句,if…else, if…else if…else,switch;     3.循环结构:重复某些代码: 分支 ...