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

Posted 袋鼠云dtstack

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了json格式化显示样式js代码分享相关的知识，希望对你有一定的参考价值。

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

代码：

 

<html>
<script src="http://cdn.bootcss.com/jquery/3.0.0-rc1/jquery.min.js"></script>
<body>
	<span class="result"></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 class="json_null">null</span>‘;
    }

    function _format_boolean(object){
        return ‘<span class="json_boolean">‘ + object + ‘</span>‘;
    }

    function _format_number(object){
        return ‘<span class="json_number">‘ + 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" class="json_link">‘ + object + ‘</a>‘
        }
        return ‘<span class="json_string">"‘ + 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  style="cursor:pointer;" class="fa fa-minus-square-o" onclick="hide(this)"></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 class="json_key">"‘ + key + ‘"</span>:‘ +  format(object[key], indent_count + 1));
        }
        return ‘<span  data-type="object"><i  style="cursor:pointer;" class="fa fa-minus-square-o" onclick="hide(this)"></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;
  })();



  	//json案例
  	var demoJson = {
	  "A1": "a1",
	  "A11": "a11",
	  "A111_next": [
	    {
	      "B1": "b1",
	      "B11": "b11",
	      "B111_next": [
	        {
	          "C1": "c1",
	          "C11": "c11",
	          "C111_next": []
	        }
	      ]
	    },
	    {
	      "B2": "b2",
	      "B22": "b22",
	      "B222_next": []
	    }
	  ]
	} 
      
    //将格式化好的json显示到前台页面
    function showJson(demoJson) {
       	var result = new JSONFormat(JSON.stringify(demoJson),4).toString()
        $(‘.result‘).html(result);
    }

	showJson(demoJson);
            
</script>
</body>
</html> 　

效果图

技术分享图片

以上是关于json格式化显示样式js代码分享的主要内容，如果未能解决你的问题，请参考以下文章

使用JavaScript在页面上显示JSON

如何在 Reactjs 中添加丰富的代码片段？

json字符串CSS格式化

Chrome-Devtools代码片段中的多个JS库

20个简洁的 JS 代码片段

从 PokeAPI for DiscordBot 以 JSON 格式显示 JS 对象