使用JavaScript打印漂亮的JSON


Answers:


5057

漂亮打印是在中本地实现的JSON.stringify()。第三个参数启用漂亮的打印并设置要使用的间距:

var str = JSON.stringify(obj, null, 2); // spacing level = 2

如果需要语法高亮显示,则可以使用一些正则表达式魔术,例如:

function syntaxHighlight(json) {
    if (typeof json != 'string') {
         json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    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>';
    });
}

在这里查看操作:jsfiddle

或下面提供的完整代码段:


23
太棒了。我添加了一个函数以在新窗口中打开此窗口以进行调试:var json =语法高亮(JSON.stringify(obj,undefined,4);); var w = window.open(); var html =“ <head> <style> pre {轮廓:1px实心#ccc;填充:5px;边距:5px;} .string {颜色:绿色;}”; html + =“” .number {color:darkorange;} .boolean {color:blue;} .null {color:洋红色;} .key {color:red;} </ style> </ head> <body>“; html + =“ <pre>” + json +“ </ pre>”; w.document.writeln(html);
JayCrossler 2012年

16
真好 但是不要忘记它需要css和a <pre>
NoBugs 2013年

4
由于某种原因,当我发出警报时,它确实显示了格式,但是当我通过jQuery将其吐到div时,它仍然显示一个扁平字符串:$(“#transactionResponse”)。show()。html(prettifyObject(data), null,'\ t'); 其中prettifyObject是我创建的方法,其中包含上面的前两行。
PositiveGuy

5
@CoffeeAddict确保您的#transactionResponse元素具有white-space: pre;CSS样式。
user123444555621 2013年

72
请注意,它stringify(...)适用于JSON 对象,不适用于JSON字符串。如果您有琴弦,则需要JSON.parse(...)先进行
Vihung 2014年

271

如果您有想要漂亮打印的对象,则用户Pumbaa80的答案很好。如果从要漂亮打印的有效JSON 字符串开始,则需要先将其转换为对象:

var jsonString = '{"some":"json"}';
var jsonPretty = JSON.stringify(JSON.parse(jsonString),null,2);  

这将从字符串中构建一个JSON对象,然后使用JSON stringify的精美外观将其转换回字符串。


11
这对我有用,但是使用抛出错误,JSON.parse因此我将其修改为JSON.stringify(jsonString, null, 2)。取决于您的JSON / Object。
2014年

14
请注意,显示字符串时,需要将其包装在<pre></pre>标签中。
不分心

6
@Jazzy JSON.parse仅在您具有无效的JSON str或已将其转换为对象的情况下死亡...确保尝试之前确保您知道要处理的数据类型JSON.parse
Kolob Canyon

@Undistraction您的评论对我很有用,我将检查需要检查的内容pre
Dhaval Jardosh '17

7
@Jazzy如果必须这样做,则没有JSON字符串,则有一个普通对象。JSON 始终是字符串。它只是Javascript对象的基于字符串的表示形式。
Clonkex

37

更好的方法。

美化Javascript中的JSON数组

JSON.stringify(jsonobj,null,'\t')

3
谢谢!该解决方案正是我个人所需要的,因为我只想在<textarea>中放入缩进的JSON
Turbo Turbo

2
这样做会更好,因为您只使用基本的javascript函数,不需要进行额外的计算,如果多次重复操作,可能会导致性能问题。对于我来说,唯一缺少的是<pre>标签。
CL

完美,正是我想要的!简短,甜美而切入点。
John

哇!谢谢!这对我非常有帮助。
judian

29

根据Pumbaa80的回答,我修改了代码以使用console.log颜色(肯定在Chrome上有效)而不是HTML。可以在控制台内看到输出。您可以在函数内部编辑_variables,以添加更多样式。

function JSONstringify(json) {
    if (typeof json != 'string') {
        json = JSON.stringify(json, undefined, '\t');
    }

    var 
        arr = [],
        _string = 'color:green',
        _number = 'color:darkorange',
        _boolean = 'color:blue',
        _null = 'color:magenta',
        _key = 'color:red';

    json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var style = _number;
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                style = _key;
            } else {
                style = _string;
            }
        } else if (/true|false/.test(match)) {
            style = _boolean;
        } else if (/null/.test(match)) {
            style = _null;
        }
        arr.push(style);
        arr.push('');
        return '%c' + match + '%c';
    });

    arr.unshift(json);

    console.log.apply(console, arr);
}

这是您可以使用的书签:

javascript:function JSONstringify(json) {if (typeof json != 'string') {json = JSON.stringify(json, undefined, '\t');}var arr = [],_string = 'color:green',_number = 'color:darkorange',_boolean = 'color:blue',_null = 'color:magenta',_key = 'color:red';json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {var style = _number;if (/^"/.test(match)) {if (/:$/.test(match)) {style = _key;} else {style = _string;}} else if (/true|false/.test(match)) {style = _boolean;} else if (/null/.test(match)) {style = _null;}arr.push(style);arr.push('');return '%c' + match + '%c';});arr.unshift(json);console.log.apply(console, arr);};void(0);

用法:

var obj = {a:1, 'b':'foo', c:[false,null, {d:{e:1.3e5}}]};
JSONstringify(obj);

编辑:在变量声明之后,我只是尝试用此行转义%符号:

json = json.replace(/%/g, '%%');

但是我发现Chrome不支持在控制台中进行%的转义。奇怪...也许将来会有用。

干杯!

在此处输入图片说明


1
我使用了您的代码,但是我得到的是json格式的输出,但是我没有得到颜色,最后我也得到了颜色标签,这是输出{“ error”:{“ code”:0,“ message”: “ O”}},color:red ,, color:red ,, color:darkorange
ramesh027 2014年

25
var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07",  "postalCode": "75007", "countryCode": "FRA",  "countryLabel": "France" };

document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj);

如果以HTML显示,则应添加一个栏杆 <pre></pre>

document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"

例:


1
什么是“平衡”?
Dan Dascalescu

它在法语中表示“标签”
Aymeric Bouzy aybbyk '19

<pre>是必须的,如果你表现出一个JSON的<div>。为此提示而投票!
曼努埃尔

23

我使用JSONView Chrome扩展程序(它看起来很漂亮:):

编辑:添加 jsonreport.js

我还发布了一个在线的独立JSON漂亮打印查看器jsonreport.js,该查看器提供了可阅读的HTML5报告,可用于查看任何JSON数据。

您可以在“ 新JavaScript HTML5报告格式”中阅读有关该格式的更多信息。


1
我需要一个Javascript * .js库,该库可以漂亮地打印添加html元素和类的JSON字符串。类似于var result = prettyPrint('{“ key”:“ value”}');
马克

21

您可以使用console.dir(),这是的快捷方式console.log(util.inspect())。(唯一的区别是它绕过了inspect()在对象上定义的任何自定义函数。)

它使用语法高亮显示智能缩进从键中删除引号,并使输出尽可能漂亮。

const object = JSON.parse(jsonString)

console.dir(object, {depth: null, colors: true})

对于命令行:

cat package.json | node -e "process.stdin.pipe(new stream.Writable({write: chunk => console.dir(JSON.parse(chunk), {depth: null, colors: true})}))"


有什么办法让它开始扩展吗?
Daniel Sokolowski16年

你是什​​么意思@DanielSokolowski?
adius

在Chrome开发者工具中,我必须单击小三角形以获取对象键,以任何方式使其自动扩展?snag.gy/7wPqsl.jpg
Daniel Sokolowski

嗯 好问题。我不知道,但是确实会有帮助……
adius

9

这是user123444555621的超棒HTML,适用于终端。方便调试Node脚本:

function prettyJ(json) {
  if (typeof json !== 'string') {
    json = JSON.stringify(json, undefined, 2);
  }
  return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, 
    function (match) {
      let cls = "\x1b[36m";
      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          cls = "\x1b[34m";
        } else {
          cls = "\x1b[32m";
        }
      } else if (/true|false/.test(match)) {
        cls = "\x1b[35m"; 
      } else if (/null/.test(match)) {
        cls = "\x1b[31m";
      }
      return cls + match + "\x1b[0m";
    }
  );
}

用法:

// thing = any json OR string of json
prettyJ(thing);

7

出于调试目的,我使用:

console.debug(“%o”,data);

3
-1; 这等效console.debug(data);于(至少)在Chrome和Firefox中进行操作。它没有显示的JSON表示形式data,更不用说漂亮的了。
马克·阿默里

1
@MarkAmery 2年前,此功能是浏览器的新增功能,仅按我描述的方式工作。如果您太年轻-我为您感到高兴!同样的语法console.debug("%s: %o x %d", str, data, cnt);可能仍然对某人有用。
吉通哥亚

2
还要查看console.dir允许浏览数据的内容。
Christophe Roussy 2014年

7

对其他漂亮的Ruby打印机不满意,我编写了自己的(NeatJSON),然后将其移植到JavaScript中,其中包括免费的在线格式化程序。该代码在MIT许可下是免费的(非常宽松)。

功能(全部可选):

  • 设置线宽并以使对象和数组在适合时保持在同一行上的方式进行换行,在不对齐时每行换一个值。
  • 如果愿意,可以对对象键进行排序。
  • 对齐对象键(将冒号对齐)。
  • 将浮点数格式化为特定的小数位数,而不会弄乱整数。
  • “短”换行模式将左括号和右括号与括号放在与值相同的行上,从而提供了某些格式。
  • 对冒号和逗号前后括号内的数组和对象的间距进行粒度控制。
  • 该功能可用于Web浏览器和Node.js。

我将在此处复制源代码,以便它不仅是指向库的链接,而且我建议您转到GitHub项目页面,因为该页面将保持最新,而下面的代码将不会更新。

(function(exports){
exports.neatJSON = neatJSON;

function neatJSON(value,opts){
  opts = opts || {}
  if (!('wrap'          in opts)) opts.wrap = 80;
  if (opts.wrap==true) opts.wrap = -1;
  if (!('indent'        in opts)) opts.indent = '  ';
  if (!('arrayPadding'  in opts)) opts.arrayPadding  = ('padding' in opts) ? opts.padding : 0;
  if (!('objectPadding' in opts)) opts.objectPadding = ('padding' in opts) ? opts.padding : 0;
  if (!('afterComma'    in opts)) opts.afterComma    = ('aroundComma' in opts) ? opts.aroundComma : 0;
  if (!('beforeComma'   in opts)) opts.beforeComma   = ('aroundComma' in opts) ? opts.aroundComma : 0;
  if (!('afterColon'    in opts)) opts.afterColon    = ('aroundColon' in opts) ? opts.aroundColon : 0;
  if (!('beforeColon'   in opts)) opts.beforeColon   = ('aroundColon' in opts) ? opts.aroundColon : 0;

  var apad  = repeat(' ',opts.arrayPadding),
      opad  = repeat(' ',opts.objectPadding),
      comma = repeat(' ',opts.beforeComma)+','+repeat(' ',opts.afterComma),
      colon = repeat(' ',opts.beforeColon)+':'+repeat(' ',opts.afterColon);

  return build(value,'');

  function build(o,indent){
    if (o===null || o===undefined) return indent+'null';
    else{
      switch(o.constructor){
        case Number:
          var isFloat = (o === +o && o !== (o|0));
          return indent + ((isFloat && ('decimals' in opts)) ? o.toFixed(opts.decimals) : (o+''));

        case Array:
          var pieces  = o.map(function(v){ return build(v,'') });
          var oneLine = indent+'['+apad+pieces.join(comma)+apad+']';
          if (opts.wrap===false || oneLine.length<=opts.wrap) return oneLine;
          if (opts.short){
            var indent2 = indent+' '+apad;
            pieces = o.map(function(v){ return build(v,indent2) });
            pieces[0] = pieces[0].replace(indent2,indent+'['+apad);
            pieces[pieces.length-1] = pieces[pieces.length-1]+apad+']';
            return pieces.join(',\n');
          }else{
            var indent2 = indent+opts.indent;
            return indent+'[\n'+o.map(function(v){ return build(v,indent2) }).join(',\n')+'\n'+indent+']';
          }

        case Object:
          var keyvals=[],i=0;
          for (var k in o) keyvals[i++] = [JSON.stringify(k), build(o[k],'')];
          if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
          keyvals = keyvals.map(function(kv){ return kv.join(colon) }).join(comma);
          var oneLine = indent+"{"+opad+keyvals+opad+"}";
          if (opts.wrap===false || oneLine.length<opts.wrap) return oneLine;
          if (opts.short){
            var keyvals=[],i=0;
            for (var k in o) keyvals[i++] = [indent+' '+opad+JSON.stringify(k),o[k]];
            if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
            keyvals[0][0] = keyvals[0][0].replace(indent+' ',indent+'{');
            if (opts.aligned){
              var longest = 0;
              for (var i=keyvals.length;i--;) if (keyvals[i][0].length>longest) longest = keyvals[i][0].length;
              var padding = repeat(' ',longest);
              for (var i=keyvals.length;i--;) keyvals[i][0] = padRight(padding,keyvals[i][0]);
            }
            for (var i=keyvals.length;i--;){
              var k=keyvals[i][0], v=keyvals[i][1];
              var indent2 = repeat(' ',(k+colon).length);
              var oneLine = k+colon+build(v,'');
              keyvals[i] = (opts.wrap===false || oneLine.length<=opts.wrap || !v || typeof v!="object") ? oneLine : (k+colon+build(v,indent2).replace(/^\s+/,''));
            }
            return keyvals.join(',\n') + opad + '}';
          }else{
            var keyvals=[],i=0;
            for (var k in o) keyvals[i++] = [indent+opts.indent+JSON.stringify(k),o[k]];
            if (opts.sorted) keyvals = keyvals.sort(function(kv1,kv2){ kv1=kv1[0]; kv2=kv2[0]; return kv1<kv2?-1:kv1>kv2?1:0 });
            if (opts.aligned){
              var longest = 0;
              for (var i=keyvals.length;i--;) if (keyvals[i][0].length>longest) longest = keyvals[i][0].length;
              var padding = repeat(' ',longest);
              for (var i=keyvals.length;i--;) keyvals[i][0] = padRight(padding,keyvals[i][0]);
            }
            var indent2 = indent+opts.indent;
            for (var i=keyvals.length;i--;){
              var k=keyvals[i][0], v=keyvals[i][1];
              var oneLine = k+colon+build(v,'');
              keyvals[i] = (opts.wrap===false || oneLine.length<=opts.wrap || !v || typeof v!="object") ? oneLine : (k+colon+build(v,indent2).replace(/^\s+/,''));
            }
            return indent+'{\n'+keyvals.join(',\n')+'\n'+indent+'}'
          }

        default:
          return indent+JSON.stringify(o);
      }
    }
  }

  function repeat(str,times){ // http://stackoverflow.com/a/17800645/405017
    var result = '';
    while(true){
      if (times & 1) result += str;
      times >>= 1;
      if (times) str += str;
      else break;
    }
    return result;
  }
  function padRight(pad, str){
    return (str + pad).substring(0, pad.length);
  }
}
neatJSON.version = "0.5";

})(typeof exports === 'undefined' ? this : exports);

5

非常感谢@all!根据先前的答案,这是另一种提供自定义替换规则作为参数的变体方法:

 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 '<strong>' + match + '</strong>';
          },
   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 '&nbsp';
          }
       } 

    ],

    keys : [
       {
           name : 'Testkey',
           regex : /("testkey")/,
           type : 'key',
           style : function(match){
             return '<h1>' + match + '</h1>';
          }
       }
    ],

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

  };

  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 '<span style="'+ rules.punctuation.style + '">' + match + '</span>';
               }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<rules.keys.length;i++){
            p = rules.keys[i];
            if (p.regex.test(match)) {
               if('string' === typeof p.style){
                   return '<span style="'+ p.style + '">' + match + '</span>';
               }else if('function' === typeof p.style){
                   return p.style(match);
               } else{
                  return match;
               }                
             }              
           }   
            return ('function'===typeof rules.defKey) ? rules.defKey(match) : '<span style="'+ rules.defKey + '">' + match + '</span>';            
        } else {
            return ('function'===typeof rules.def) ? rules.def(match) : '<span style="'+ rules.def + '">' + match + '</span>';
        }
    } else {
        for(i=0;i<rules.types.length;i++){
         p = rules.types[i];
         if (p.regex.test(match)) {
               if('string' === typeof p.style){
                   return '<span style="'+ p.style + '">' + match + '</span>';
               }else if('function' === typeof p.style){
                   return p.style(match);
               } else{
                  return match;
               }                
          }             
        }

     }

    });

  if(true === pre)str = '<pre>' + str + '</pre>';
  if(true === code)str = '<code>' + str + '</code>';
  return str;
 }

什么是“ rr”参数?
manking

1
@manking ... rules = $ .extend(rules,('object'=== typeof rr)?rr:{}); ...这是通过rulset对象扩展规则集。(也许您会找到更新:github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/…
webfan



4

我今天遇到了@ Pumbaa80的代码问题。我试图将JSON语法突出显示应用于在Mithril视图中渲染的数据,因此我需要为JSON.stringify输出中的所有内容创建DOM节点。

我也将很长的正则表达式拆分为其组成部分。

render_json = (data) ->
  # wraps JSON data in span elements so that syntax highlighting may be
  # applied. Should be placed in a `whitespace: pre` context
  if typeof(data) isnt 'string'
    data = JSON.stringify(data, undefined, 2)
  unicode =     /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/
  keyword =     /\b(true|false|null)\b/
  whitespace =  /\s+/
  punctuation = /[,.}{\[\]]/
  number =      /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/

  syntax = '(' + [unicode, keyword, whitespace,
            punctuation, number].map((r) -> r.source).join('|') + ')'
  parser = new RegExp(syntax, 'g')

  nodes = data.match(parser) ? []
  select_class = (node) ->
    if punctuation.test(node)
      return 'punctuation'
    if /^\s+$/.test(node)
      return 'whitespace'
    if /^\"/.test(node)
      if /:$/.test(node)
        return 'key'
      return 'string'

    if /true|false/.test(node)
      return 'boolean'

     if /null/.test(node)
       return 'null'
     return 'number'
  return nodes.map (node) ->
    cls = select_class(node)
    return Mithril('span', {class: cls}, node)

在代码Github上语境这里


4

这是用React编写的一个简单的JSON格式/颜色组件:

const HighlightedJSON = ({ json }: Object) => {
  const highlightedJSON = jsonObj =>
    Object.keys(jsonObj).map(key => {
      const value = jsonObj[key];
      let valueType = typeof value;
      const isSimpleValue =
        ["string", "number", "boolean"].includes(valueType) || !value;
      if (isSimpleValue && valueType === "object") {
        valueType = "null";
      }
      return (
        <div key={key} className="line">
          <span className="key">{key}:</span>
          {isSimpleValue ? (
            <span className={valueType}>{`${value}`}</span>
          ) : (
            highlightedJSON(value)
          )}
        </div>
      );
    });
  return <div className="json">{highlightedJSON(json)}</div>;
};

看到它在此CodePen中工作:https ://codepen.io/benshope/pen/BxVpjo

希望有帮助!



3

如果您需要在文本区域中使用此功能,则接受的解决方案将不起作用。

<textarea id='textarea'></textarea>

$("#textarea").append(formatJSON(JSON.stringify(jsonobject),true));

function formatJSON(json,textarea) {
    var nl;
    if(textarea) {
        nl = "&#13;&#10;";
    } else {
        nl = "<br>";
    }
    var tab = "&#160;&#160;&#160;&#160;";
    var ret = "";
    var numquotes = 0;
    var betweenquotes = false;
    var firstquote = false;
    for (var i = 0; i < json.length; i++) {
        var c = json[i];
        if(c == '"') {
            numquotes ++;
            if((numquotes + 2) % 2 == 1) {
                betweenquotes = true;
            } else {
                betweenquotes = false;
            }
            if((numquotes + 3) % 4 == 0) {
                firstquote = true;
            } else {
                firstquote = false;
            }
        }

        if(c == '[' && !betweenquotes) {
            ret += c;
            ret += nl;
            continue;
        }
        if(c == '{' && !betweenquotes) {
            ret += tab;
            ret += c;
            ret += nl;
            continue;
        }
        if(c == '"' && firstquote) {
            ret += tab + tab;
            ret += c;
            continue;
        } else if (c == '"' && !firstquote) {
            ret += c;
            continue;
        }
        if(c == ',' && !betweenquotes) {
            ret += c;
            ret += nl;
            continue;
        }
        if(c == '}' && !betweenquotes) {
            ret += nl;
            ret += tab;
            ret += c;
            continue;
        }
        if(c == ']' && !betweenquotes) {
            ret += nl;
            ret += c;
            continue;
        }
        ret += c;
    } // i loop
    return ret;
}

3

如果您正在寻找一个漂亮的库来美化网页上的json ...

Prism.js相当不错。

http://prismjs.com/

我发现使用JSON.stringify(obj,undefined,2)来获得缩进,然后使用棱镜来添加主题是一个很好的方法。

如果要通过ajax调用加载JSON,则可以运行Prism的一种实用程序方法来美化

例如:

Prism.highlightAll()

1

这很好:

来自的https://github.com/mafintosh/json-markupmafintosh

const jsonMarkup = require('json-markup')
const html = jsonMarkup({hello:'world'})
document.querySelector('#myElem').innerHTML = html

的HTML

<link ref="stylesheet" href="style.css">
<div id="myElem></div>

示例样式表可以在这里找到

https://raw.githubusercontent.com/mafintosh/json-markup/master/style.css

1

找不到任何具有突出显示控制台语法的解决方案,所以这是我的2p

安装并添加cli-highlight依赖项

npm install cli-highlight --save

全局定义logjson

const highlight = require('cli-highlight').highlight
console.logjson = (obj) => console.log(
                               highlight( JSON.stringify(obj, null, 4), 
                                          { language: 'json', ignoreIllegals: true } ));

采用

console.logjson({foo: "bar", someArray: ["string1", "string2"]});

输出


0

我建议使用HighlightJS。它使用接受的答案相同的原理,但也适用于许多其他语言,并具有许多预定义的配色方案。如果使用RequireJS,则可以使用以下命令生成兼容模块

python3 tools/build.py -tamd json xml <specify other language here>

生成依赖于Python3和Java。添加-n以生成非缩小版本。


0

这是不使用本机功能即可进行打印的方法。

function pretty(ob, lvl = 0) {

  let temp = [];

  if(typeof ob === "object"){
    for(let x in ob) {
      if(ob.hasOwnProperty(x)) {
        temp.push( getTabs(lvl+1) + x + ":" + pretty(ob[x], lvl+1) );
      }
    }
    return "{\n"+ temp.join(",\n") +"\n" + getTabs(lvl) + "}";
  }
  else {
    return ob;
  }

}

function getTabs(n) {
  let c = 0, res = "";
  while(c++ < n)
    res+="\t";
  return res;
}

let obj = {a: {b: 2}, x: {y: 3}};
console.log(pretty(obj));

/*
  {
    a: {
      b: 2
    },
    x: {
      y: 3
    }
  }
*/

0

显示对象以进行调试的最简单方法:

console.log("data",data) // lets you unfold the object manually

如果要在DOM中显示对象,则应考虑它可能包含将被解释为HTML的字符串。因此,您需要做一些转义 ...

var s = JSON.stringify(data,null,2) // format
var e = new Option(s).innerHTML // escape
document.body.insertAdjacentHTML('beforeend','<pre>'+e+'</pre>') // display

0
<!-- here is a complete example pretty print with more space between lines-->
<!-- be sure to pass a json string not a json object -->
<!-- use line-height to increase or decrease spacing between json lines -->

<style  type="text/css">
.preJsonTxt{
  font-size: 18px;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 200%;
}
.boxedIn{
  border: 1px solid black;
  margin: 20px;
  padding: 20px;
}
</style>

<div class="boxedIn">
    <h3>Configuration Parameters</h3>
    <pre id="jsonCfgParams" class="preJsonTxt">{{ cfgParams }}</pre>
</div>

<script language="JavaScript">
$( document ).ready(function()
{
     $(formatJson);

     <!-- this will do a pretty print on the json cfg params      -->
     function formatJson() {
         var element = $("#jsonCfgParams");
         var obj = JSON.parse(element.text());
        element.html(JSON.stringify(obj, undefined, 2));
     }
});
</script>

0

要突出显示和美化它,请HTML使用Bootstrap

function prettifyJson(json, prettify) {
    if (typeof json !== 'string') {
        if (prettify) {
            json = JSON.stringify(json, undefined, 4);
        } else {
            json = JSON.stringify(json);
        }
    }
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
        function(match) {
            let cls = "<span>";
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = "<span class='text-danger'>";
                } else {
                    cls = "<span>";
                }
            } else if (/true|false/.test(match)) {
                cls = "<span class='text-primary'>";
            } else if (/null/.test(match)) {
                cls = "<span class='text-info'>";
            }
            return cls + match + "</span>";
        }
    );
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.