将 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. Java ->在mybatis和PostgreSQL Json字段作为查询条件的解决方案

    Date:2019-11-15 读前思考: 你没想到解决办法? PostgreSQL 数据库本身就支持还是另有解决办法? 说明:首先这次数据库使用到Json数据类型的原因,这次因为我们在做了一个app ...

  2. Linux常用命令复习

    1> 查看文件信息:ls ls是英文单词list的简写,其功能为列出目录的内容,是用户最常用的命令之一,它类似于DOS下的dir命令. Linux文件或者目录名称最长可以有265个字符,“.”代 ...

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

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

  4. 给大家整理了几个开源免费的 Spring Boot + Vue 学习资料

    最近抽空在整理前面的文章案例啥的,顺便把手上的几个 Spring Boot + Vue 的学习资料推荐给各位小伙伴.这些案例有知识点的讲解,也有项目实战,正在做这一块的小伙伴们可以收藏下. 案例学习 ...

  5. nyoj 96-n-1位数 (strlen, atoi, ceil)

    96-n-1位数 内存限制:64MB 时间限制:3000ms 特判: No 通过数:30 提交数:47 难度:1 题目描述: 已知w是一个大于10但不大于1000000的无符号整数,若w是n(n≥2) ...

  6. Linux注意事项

    一.学习 Linux 的注意事项 1. Linux 严格区分大小写 Linux 是严格区分大小写的,这一点和 Windows 不一样,所以操作时要注意区分大小写的不同,包括文件名和目录名.命令.命令选 ...

  7. PHP产生不重复随机数的5个方法总结

    无论是Web应用,还是WAP或者移动应用,随机数都有其用武之地.在最近接触的几个小项目中,我也经常需要和随机数或者随机数组打交道,所以,对于PHP如何产生不重复随机数常用的几种方法小结一下 无论是We ...

  8. 使用C#+FFmpeg+DirectX+dxva2硬件解码播放h264流

    本文门槛较高,因此行文看起来会乱一些,如果你看到某处能会心一笑请马上联系我开始摆龙门阵 如果你跟随这篇文章实现了播放器,那你会得到一个高效率,低cpu占用(单路720p视频解码播放占用1%左右cpu) ...

  9. 工作日志，error parsing query: unable to find time zone

    工作日志,error parsing query: unable to find time zone 坑 Windows 系统使用influxdb数据库,在执行查询语句时提示 ERR: error p ...

  10. python中的__call__方法

    在Python中,函数其实是一个对象: >>> f = abs >>> f.__name__ 'abs' >>> f(-) 由于 f 可以被调用, ...