简单实现JSON字符串的可视化

要用到的核心是JSON.stringify这个函数

JSON.stringify(value [, replacer] [, space])

它可以指定在生成的字符串中加多少空格，从而生成有一定格式的字符串。生成的字符串我们可以放在<pre>标签中，这样就能很好的显示缩进。然后呢，为了让生成的数据有高亮效果，我们还可以写一个简单的高亮函数。基本就是这么个原理啦，请看代码实现：

<script type="text/javascript" >

		$(document).ready(function() {
			var obj = {
		        num: 1234,
		        str: '字符串',
		        arr: [1, 2, 3, 4, 5, 6],
		        obj: {
		            name: 'tom',
		            age: 10,
		            like: ['a', 'b']
		        }
		    };
		    var str = JSON.stringify(obj, undefined, 4);
		    alert(str);
		    output(syntaxHighlight(str));
		});


		function output(inp) {
		    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
		}

		function syntaxHighlight(json) {
		    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>