pretty-print JSON using JavaScript

后端 未结 24 1712
一向
一向 2020-11-21 06:45

How can I display JSON in an easy-to-read (for human readers) format? I\'m looking primarily for indentation and whitespace, with perhaps even colors / font-styles / etc.

24条回答
  •  长发绾君心
    2020-11-21 07:14

    Thanks a lot @all! Based on the previous answers, here is another variant method providing custom replacement rules as parameter:

     renderJSON : function(json, rr, code, pre){
       if (typeof json !== 'string') {
          json = JSON.stringify(json, undefined, '\t');
       }
      var rules = {
       def : 'color:black;',    
       defKey : function(match){
                 return '' + match + '';
              },
       types : [
           {
              name : 'True',
              regex : /true/,
              type : 'boolean',
              style : 'color:lightgreen;'
           },
    
           {
              name : 'False',
              regex : /false/,
              type : 'boolean',
              style : 'color:lightred;'
           },
    
           {
              name : 'Unicode',
              regex : /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/,
              type : 'string',
              style : 'color:green;'
           },
    
           {
              name : 'Null',
              regex : /null/,
              type : 'nil',
              style : 'color:magenta;'
           },
    
           {
              name : 'Number',
              regex : /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/,
              type : 'number',
              style : 'color:darkorange;'
           },
    
           {
              name : 'Whitespace',
              regex : /\s+/,
              type : 'whitespace',
              style : function(match){
                 return ' ';
              }
           } 
    
        ],
    
        keys : [
           {
               name : 'Testkey',
               regex : /("testkey")/,
               type : 'key',
               style : function(match){
                 return '

    ' + match + '

    '; } } ], punctuation : { name : 'Punctuation', regex : /([\,\.\}\{\[\]])/, type : 'punctuation', style : function(match){ return '

    ________

    '; } } }; if('undefined' !== typeof jQuery){ rules = $.extend(rules, ('object' === typeof rr) ? rr : {}); }else{ for(var k in rr ){ rules[k] = rr[k]; } } var str = json.replace(/([\,\.\}\{\[\]]|"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) { var i = 0, p; if (rules.punctuation.regex.test(match)) { if('string' === typeof rules.punctuation.style){ return '' + match + ''; }else if('function' === typeof rules.punctuation.style){ return rules.punctuation.style(match); } else{ return match; } } if (/^"/.test(match)) { if (/:$/.test(match)) { for(i=0;i' + match + ''; }else if('function' === typeof p.style){ return p.style(match); } else{ return match; } } } return ('function'===typeof rules.defKey) ? rules.defKey(match) : '' + match + ''; } else { return ('function'===typeof rules.def) ? rules.def(match) : '' + match + ''; } } else { for(i=0;i' + match + ''; }else if('function' === typeof p.style){ return p.style(match); } else{ return match; } } } } }); if(true === pre)str = '
    ' + str + '
    '; if(true === code)str = '' + str + ''; return str; }

提交回复
热议问题