将 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. mysql group by使用方法注意

    mysql group by使用方法注意 group by 后面只用能用having 不能加 where等域名

  2. 7月22 Linux作业-文件管理

    习题内容 解答 1.答案 [root@centos7 ~]# echo '*/1 * * * * /usr/bin/cp /etc /data/`/usr/bin/date +\%Y-\%m-\%d` ...

  3. 交叉编译sqlcipher

    1. 小心预编译宏SQLITE_HAS_CODEC 2. openssl在不同License下,导出的符号不对等.(错了,1.1.0后api发生变化,小心选用openssl版本) 3, ac使用了li ...

  4. 0MQ文档导读

    1. 先结合RabbitMQ Tutorials,弄清0MQ socket的各种类型. 1.1. 0MQ PAIR 对应 RabbitMQ Tutorials的 "Hello world&q ...

  5. objc反汇编分析__strong和__weak

    如题所说反汇编看__strong和__weak的真实样子,代码列举自然多,篇幅长不利于阅读,我就先搬出结论,后面是分析. 在NON-ARC环境,__strong和__weak不起作用.相反在ARC环境 ...

  6. 隐藏input输入框的增减按钮

    当input 使用了type='number'后,会出现这个增减数值的按钮,如上所示, 解决办法: 1.type='text' ,改为输入字符串,缺点是要做类型转换,而且移动端不会调出纯数字键盘 2. ...

  7. Nmap强大在哪之主机发现

    1.概述 博主前段时间刚入坑渗透测试,随着学习的深入,越来越发现Nmap简直无所不能.今天先从主机发现功能入手分析. 2.Nmap主机发现 nmap --help #nmap帮助 3.参数分析 3.1 ...

  8. Python练习100题

    Python练习100题 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? #Filename:001.py cnt = 0#count the sum of res ...

  9. 老男孩python 自学day09 函数开始

    什么是函数? 函数用关键字def定义 语法: def 函数名(形参): 函数体 return 调用 函数名(实参) 命名规则:和变量一样 1. 由数字, 字母, 下划线组成 2. 不能数字开头. 更不 ...

  10. 【Java实例】使用Thumbnailator生成缩略图（缩放、旋转、裁剪、水印）

    1 需求 表哥需要给儿子报名考试,系统要求上传不超过30KB的图片,而现在的手机随手一拍就是几MB的,怎么弄一个才30KB的图片呢? 一个简单的办法是在电脑上把图片缩小,然后截屏小图片,但现在的电脑屏 ...