将 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. [转载]2.4 UiPath循环活动While的介绍和使用

    一.While循环的介绍 先判断条件是否满足, 如果满足, 再执行循环体, 直到判断条件不满足, 则跳出循环 二.While循环在UiPath中的使用 1. 打开设计器,在设计库中新建一个Flowch ...

  2. Unity加载AB包

    Unity制作游戏AB包 需要注意的是在游戏场景运行的情况下,不能编译AB包,不运行的情况下编译AB包需要使用Unity的扩展菜单功能,首先需要建立菜单用来编译AB包. 1.建立AB包的名字,首先选中 ...

  3. 破解微擎安装，免费搭建微擎，免费破解微擎，微擎破解版本，最新版本V2.1.2，一键安装！！

    ​ 微擎是一款基于WEB2.0(PHP+Mysql)技术架构,免费开源的公众平台管理系统,一款致力于将小程序和公众号商业化.智慧化.场景化的自助引擎.微擎提供公众号.微信小程序.支付宝小程序.百度熊掌 ...

  4. nyoj 803-A/B Problem

    803-A/B Problem 内存限制:64MB 时间限制:1000ms 特判: No 通过数:2 提交数:4 难度:3 题目描述: 做了A+B Problem,A/B Problem不是什么问题了 ...

  5. ArcGIS API For Javascript ：如何在地图上做出点位脉冲闪烁的效果

    日常地图表达中我们通常使用的地图符号多是静态地图符号,时间久了会造成视觉审美疲劳,也没有现代感. 在这种背景下,对现有地图符号进行简单处理,即可得到色彩鲜艳,对比度强烈,活灵活现的地图表达形式. 灵感 ...

  6. SQL Server Management Studio 安装流程

    数据库的操作需要使用SQL Server Management Studio,不过也可以使用其他的: 下面是安装操作的步骤:如果你下载的压缩包,你需要先解压到一个文件夹里,然后双击setup.exe, ...

  7. 关于springboot2.*版本无法加载静态资源

    前言 在学习springboot的过程中,发现无法引用静态资源.我使用的是springboot2.2.1版本. 追溯源码,终于解决.并记录下解决思路. 默认加载路径 首先得知道springboot默认 ...

  8. PL真有意思（五）：数据类型

    前言 现在大多数程序设计语言中都有表达式和/或对象的类型概念.类型起着两种主要作用: 为许多操作提供了隐含的上下文信息,使程序员可以在许多情况下不必显示的描述这种上下文.比如int类型的两个对象相加就 ...

  9. 在Windows Server 2019通过Docker Compose部署Asp.Net Core

    一.安装Docker Enterprise 安装文档是: https://docs.docker.com/install/windows/docker-ee/ 安装完成后,如下图 二.首先,拉取一个W ...

  10. 从零开始在ubuntu上配置深度学习开发环境

    从零开始在ubuntu上配置深度学习开发环境 昨天一不小心把原来配置好的台式机的开发环境破坏了,调了半天没有调回来,索性就重装一次ubuntu系统.这篇文章主要记录一个简单的.‘傻瓜式’教程. 一.U ...