json格式化显示样式js代码分享

最近开发中需要在页面展示json。特整理了下代码，送给大家，希望能帮到有同样需求的朋友们。

代码：

 html 

 script src="http://cdn.bootcss.com/jquery/3.0.0-rc1/jquery.min.js" /script 

 body 

 span /span 

 script 

//json格式化方法 参数1：json对象，参数2：缩进字符数 

var JSONFormat = (function(){

 var _toString = Object.prototype.toString;

 function format(object, indent_count){

 var html_fragment = ;

 switch(_typeof(object)){

 case Null :0

 html_fragment = _format_null(object);

 break;

 case Boolean :

 html_fragment = _format_boolean(object);

 break;

 case Number :

 html_fragment = _format_number(object);

 break;

 case String :

 html_fragment = _format_string(object);

 break;

 case Array :

 html_fragment = _format_array(object, indent_count);

 break;

 case Object :

 html_fragment = _format_object(object, indent_count);

 break;

 return html_fragment;

 function _format_null(object){

 return  span null /span 

 function _format_boolean(object){

 return  span  + object +  /span 

 function _format_number(object){

 return  span  + object +  /span 

 function _format_string(object){

 object = object.replace(/\ /g," 

 object = object.replace(/\ /g," 

 if(0 = object.search(/^http/)){

 object =  a href=" + object + " target="_blank"  + object +  /a 

 return  span " + object + " /span 

 function _format_array(object, indent_count){

 var tmp_array = [];

 for(var i = 0, size = object.length; i size; ++i){

 tmp_array.push(indent_tab(indent_count) + format(object[i], indent_count + 1));

 return  span data-type="array" data-size=" + tmp_array.length + " i /i [ br/ 

 + tmp_array.join(, br/ )

 +  br/  + indent_tab(indent_count - 1) + ] /span 

 function _format_object(object, indent_count){

 var tmp_array = [];

 for(var key in object){

 tmp_array.push( indent_tab(indent_count) +  span " + key + " /span : + format(object[key], indent_count + 1));

 return  span data-type="object" i /i { br/ 

 + tmp_array.join(, br/ )

 +  br/  + indent_tab(indent_count - 1) + } /span 

 function indent_tab(indent_count){

 return (new Array(indent_count + 1)).join(    );

 function _typeof(object){

 var tf = typeof object,

 ts = _toString.call(object);

 return null === object ? Null :

 undefined == tf ? Undefined :

 boolean == tf ? Boolean :

 number == tf ? Number :

 string == tf ? String :

 [object Function] == ts ? Function :

 [object Array] == ts ? Array :

 [object Date] == ts ? Date : Object;

 function loadCssString(){

 var style = document.createElement(style);

 style.type = text/css;

 var code = Array.prototype.slice.apply(arguments).join();

 try{

 style.appendChild(document.createTextNode(code));

 }catch(ex){

 style.styleSheet.cssText = code;

 document.getElementsByTagName(head)[0].appendChild(style);

 loadCssString(

 .json_key{ color: #92278f;font-weight:bold;},

 .json_null{color: #f1592a;font-weight:bold;},

 .json_string{ color: #3ab54a;font-weight:bold;},

 .json_number{ color: #25aae2;font-weight:bold;},

 .json_link{ color: #717171;font-weight:bold;},

 .json_array_brackets{});

 var _JSONFormat = function(origin_data){

 this.data = JSON.parse(origin_data);

 _JSONFormat.prototype = {

 constructor : JSONFormat,

 toString : function(){

 return format(this.data, 1);

 return _JSONFormat;

 })();


 function showJson(demoJson) {

 var result = new JSONFormat(JSON.stringify(demoJson),4).toString()

 $(.result).html(result);

 showJson(demoJson);

 /script 

 /body 

 /html