将 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. Linux的组管理和权限管理

    前言 前面的文章中提到:Linux在管理用户权限时,既是面向用户的,又是面向组的,通过管理用户的权限规定了其对所拥有的文件的权限(读.改.执行),通过管理组的权限而规定了该组中用户对于某一文件的权限. ...

  2. mysql找出重复数据的方法

    mysql找出重复数据的方法<pre>select openid,count(openid) from info group by openid,jichushezhi_id HAVING ...

  3. html5 textarea 写入换行的方法

    html5 textarea 写入换行的方法<pre> <textarea id="fwe" class="selmiao" cols=&qu ...

  4. 使用客户机和主机做DNS服务正向解析及小问题解决

    1.下载yum包 命令:yum install bind-chroot 2.更改配置文件 在这里,要了解到主配置文件为:   /etc/named.conf 但是,为了避免经常修改主配置文件named ...

  5. 第六天、用户、组、权限、grep

    第六天.用户.组.权限.grep 权限总结表 操作 源目录权限 文件权限 目标目录权限 rm删文件 wx - - mv改名 wx - - mv移动文件 wx r wx cp复制文件 x r wx &g ...

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

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

  7. Java枚举——枚举的作用、使用方法、使用场景

    枚举的定义 枚举关键字enum 枚举类是一种特殊类,它和普通类一样可以使用构造器.定义成员变量和方法,也可以实现多个接口,但不能继承类. 枚举的使用 enum Color { RED, BLUE, G ...

  8. kafka线上滚动升级方案记录

    kafka升级方案 为什么进行kafka升级 一.修改unclean.leader.election.enabled默认值Kafka社区终于下定决心要把这个参数的默认值改成false,即不再允许出现u ...

  9. Appium+python自动化（四十二）-Appium自动化测试框架综合实践- 寿终正寝完结篇（超详解）

    1.简介 按照上一篇的计划,今天给小伙伴们分享执行测试用例,生成测试报告,以及自动化平台.今天这篇分享讲解完.Appium自动化测试框架就要告一段落了. 2.执行测试用例&报告生成 测试报告, ...

  10. pat 1136 A Delayed Palindrome（20 分）

    1136 A Delayed Palindrome(20 分) Consider a positive integer N written in standard notation with k+1 ...