zoukankan      html  css  js  c++  java
  • html格式化输出JSON( 测试接口)

    将 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*:)?|(true|false|null)|-?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>
    
  • 相关阅读:
    WINDOWS REDIS 修改requirepass 不生效;
    解读JavaScript原型链
    禁止浏览器自动填写用户名密码
    Vue购物车实例
    scrollTop的兼容性
    jQuery架构(源码)分析
    web前端优化整理(转)
    前端模块化:RequireJS(转)
    前端构建之gulp与常用插件(转载)
    PS快捷键
  • 原文地址:https://www.cnblogs.com/feiyu-mdm/p/6704386.html
Copyright © 2011-2022 走看看