json格式化-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
	<title></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>

</head>
<body>
<pre id="div1">

</pre>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script type="text/javascript">
		var a = '{"a": 1,"b": 2}';
		var b = {
			"aaa" : 111,
			"bbb" : 22,
			"ccc" : false
		};

		$(document).ready(function(){
			$("#div1").html(syntaxHighlight(b))
		});


		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>
</body>
</html>

转载于:https://my.oschina.net/cwzhang/blog/1590703