JSON đẹp bằng cách sử dụng JavaScript


2426

Làm cách nào tôi có thể hiển thị JSON theo định dạng dễ đọc (dành cho người đọc)? Tôi đang tìm kiếm chủ yếu cho thụt lề và khoảng trắng, có lẽ cả màu sắc / kiểu phông chữ / v.v.




4
Nếu bạn chỉ xuất ra html, bạn có thể gói nó trong một <pre>thẻ.
Ryan Walker

Câu trả lời:


5058

In ấn đẹp được thực hiện tự nhiên trongJSON.stringify() . Đối số thứ ba cho phép in đẹp và đặt khoảng cách để sử dụng:

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

Nếu bạn cần tô sáng cú pháp, bạn có thể sử dụng một số phép thuật regex như vậy:

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>';
    });
}

Xem trong hành động ở đây: jsfiddle

Hoặc một đoạn đầy đủ được cung cấp dưới đây:


23
Siêu tuyệt vời. Tôi đã thêm một hàm để bật mở cái này trong một cửa sổ mới để gỡ lỗi: var json = cú pháp cao (JSON.opesify (obj, không xác định, 4);); var w = window.open (); var html = "<head> <style> pre {phác thảo: 1px solid #ccc; padding: 5px; lề: 5px;}. chuỗi {color: green;}"; html + = ".number {color: darkorange;} .boolean {color: blue;} .null {color: magenta;} .key {color: red;} </ style> </ head> <body>"; html + = "<pre>" + json + "</ pre>"; w.document.writeln (html);
JayCrossler

16
Đẹp. Đừng quên nó cần css và một <pre>, mặc dù.
NoBugs

4
vì một số lý do, khi tôi cảnh báo nó, nó thực sự hiển thị được định dạng tuy nhiên vẫn hiển thị một chuỗi phẳng khi tôi nhổ nó ra div thông qua jQuery: $ ("# giao dịchResponse"). show (). html (prettifyObject (data), null, '\ t'); trong đó prettifyObject là một phương thức tôi đã tạo có chứa hai dòng đầu tiên của bạn ở trên.
positiveGuy

5
@CoffeeAddict Đảm bảo rằng #transactionResponsephần tử của bạn có white-space: pre;kiểu CSS.
dùng123444555621

72
Lưu ý rằng stringify(...)hoạt động trên các đối tượng JSON , không phải trên chuỗi JSON. Nếu bạn có một chuỗi, JSON.parse(...)trước tiên bạn cần phải có
Vihung

271

Câu trả lời của người dùng Pumbaa80 là tuyệt vời nếu bạn có một đối tượng bạn muốn in đẹp. Nếu bạn đang bắt đầu từ một chuỗi JSON hợp lệ mà bạn muốn in đẹp, trước tiên bạn cần chuyển đổi nó thành một đối tượng:

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

Điều này xây dựng một đối tượng JSON từ chuỗi, sau đó chuyển đổi nó trở lại thành chuỗi bằng cách sử dụng bản in đẹp của JSON stringify.


11
Điều này làm việc cho tôi, nhưng đã gây ra lỗi khi sử dụng JSON.parsevì vậy tôi đã sửa đổi nó thành JSON.stringify(jsonString, null, 2). Phụ thuộc vào JSON / Object của bạn.
Jazzy

15
Lưu ý rằng khi hiển thị chuỗi bạn cần bọc nó trong <pre></pre>thẻ.
Undistraction

6
@Jazzy JSON.parsechỉ chết nếu bạn có một chuỗi JSON không hợp lệ hoặc nó đã được chuyển đổi thành một đối tượng ... hãy chắc chắn rằng bạn biết kiểu dữ liệu nào bạn đang xử lý trước khi thửJSON.parse
Kolob Canyon

7
@Jazzy Nếu bạn phải làm điều đó, bạn không có chuỗi JSON, bạn có một đối tượng bình thường. JSON luôn là một chuỗi. Nó chỉ là một đại diện dựa trên chuỗi của một đối tượng Javascript.
Clonkex

37

Cách tốt hơn.

Làm mới mảng JSON trong Javascript

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

3
Cảm ơn! Giải pháp này là thứ mà cá nhân tôi đang tìm kiếm vì tôi chỉ muốn đặt một JSON được thụt vào trong <textarea>
Turbo

2
Điều này tốt hơn bởi vì bạn chỉ sử dụng chức năng javascript cơ bản không yêu cầu tính toán bổ sung có thể gây ra sự cố về hiệu suất nếu thao tác được lặp lại nhiều lần. Điều duy nhất còn thiếu đối với tôi để làm việc này là các thẻ <pre>.
CL

Hoàn hảo và chính xác những gì tôi đang tìm kiếm! Ngắn, ngọt ngào, và cho điểm.
Giăng

Ồ cảm ơn bạn! Nó rất hữu ích cho tôi.
Judian

29

Dựa trên câu trả lời của Pumbaa80, tôi đã sửa đổi mã để sử dụng màu console.log (chắc chắn hoạt động trên Chrome) và không phải HTML. Đầu ra có thể được nhìn thấy bên trong giao diện điều khiển. Bạn có thể chỉnh sửa các biến trong hàm thêm một số kiểu.

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);
}

Đây là một bookmarklet bạn có thể sử dụng:

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);

Sử dụng:

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

Chỉnh sửa: Tôi vừa cố thoát biểu tượng% bằng dòng này, sau khi khai báo biến:

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

Nhưng tôi phát hiện ra rằng Chrome không hỗ trợ% thoát trong bảng điều khiển. Lạ thật ... Có lẽ điều này sẽ hoạt động trong tương lai.

Chúc mừng!

nhập mô tả hình ảnh ở đây


1
Tôi đã sử dụng mã ur nhưng tôi nhận được đầu ra ở định dạng json nhưng tôi không nhận được màu và cuối cùng tôi nhận được thẻ màu, đây là đầu ra {"error": {"code": 0, "message": "O"}}, màu: đỏ ,, màu: đỏ ,, màu: darkorange
ramesh027

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

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

Trong trường hợp hiển thị trong HTML, bạn nên thêm một balise <pre></pre>

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

Thí dụ:


1
Một "balise" là gì?
Dan Dascalescu

nó có nghĩa là "thẻ" trong tiếng Pháp
Aymeric Bouzy aybbyk

Điều bắt <pre>buộc nếu bạn hiển thị JSON trong a <div>. Nâng cao chỉ cho gợi ý đó!
Manuel

23

Tôi sử dụng tiện ích mở rộng JSONView Chrome (nó cũng đẹp như vậy :):

Chỉnh sửa: đã thêm jsonreport.js

Tôi cũng đã phát hành một trình xem in JSON độc lập trực tuyến, jsonreport.js, cung cấp báo cáo HTML5 có thể đọc được mà bạn có thể sử dụng để xem bất kỳ dữ liệu JSON nào.

Bạn có thể đọc thêm về định dạng trong Định dạng Báo cáo HTML5 JavaScript mới .


1
Tôi cần một thư viện Javascript * .js có thể in một chuỗi JSON thêm các phần tử và lớp html. Một cái gì đó như var result = beautifulPrint ('{"key": "value"}');
Đánh dấu

21

Bạn có thể sử dụng console.dir(), đó là một phím tắt cho console.log(util.inspect()). (Sự khác biệt duy nhất là nó bỏ qua mọi tùy chỉnhinspect() chức năng được xác định trên một đối tượng.)

Nó sử dụng làm nổi bật cú pháp , thụt lề thông minh , xóa dấu ngoặc kép khỏi các phím và chỉ làm cho đầu ra đẹp như mong muốn.

const object = JSON.parse(jsonString)

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

và cho dòng lệnh:

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


Bất cứ cách nào để có được nó để nó bắt đầu mở rộng?
Daniel Sokolowski

Ý bạn là gì @DanielSokolowski?
adius

trong Công cụ dành cho nhà phát triển Chrome Tôi phải nhấp vào hình tam giác nhỏ để nhận các phím đối tượng, có cách nào để tự động mở rộng không? snag.gy/7wPqsl.jpg
Daniel Sokolowski

Ừm Câu hỏi hay. Tôi không biết về một người, nhưng thực sự sẽ rất hữu ích
Adius

9

Đây là một HTML tuyệt vời của user123444555621 được điều chỉnh cho các thiết bị đầu cuối. Tiện dụng để gỡ lỗi các tập lệnh 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";
    }
  );
}

Sử dụng:

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

7

Đối với mục đích gỡ lỗi tôi sử dụng:

console.debug ("% o", dữ liệu);

3
-1; điều này tương đương với việc chỉ làm console.debug(data);(ít nhất) Chrome và Firefox. Nó không hiển thị đại diện JSON data, chứ đừng nói đến một bản in đẹp.
Đánh dấu Amery

1
@MarkAmery 2 năm trước tính năng này là mới cho trình duyệt và chỉ hoạt động như tôi mô tả. Nếu bạn còn quá trẻ - tôi mừng cho bạn! Ngoài ra cú pháp như console.debug("%s: %o x %d", str, data, cnt);vẫn có thể hữu ích cho ai đó.
gavenkoa

2
Cũng nhìn vào console.dirđó cho phép điều hướng dữ liệu.
Barshe Roussy

7

Không hài lòng với các máy in đẹp khác cho Ruby, tôi đã tự viết ( NeatJSON ) và sau đó chuyển nó sang JavaScript bao gồm một trình định dạng trực tuyến miễn phí . Mã này là miễn phí theo giấy phép MIT (khá cho phép).

Các tính năng (tất cả tùy chọn):

  • Đặt độ rộng của dòng và bọc theo cách giữ các đối tượng và mảng trên cùng một dòng khi chúng khớp, gói một giá trị trên mỗi dòng khi chúng không.
  • Sắp xếp các khóa đối tượng nếu bạn thích.
  • Căn chỉnh các khóa đối tượng (sắp xếp các dấu hai chấm).
  • Định dạng số dấu phẩy động thành số thập phân cụ thể, mà không làm rối các số nguyên.
  • Chế độ gói 'ngắn' đặt dấu ngoặc / đóng / mở trên cùng một dòng với các giá trị, cung cấp định dạng mà một số người thích.
  • Kiểm soát chi tiết về khoảng cách cho các mảng và đối tượng, giữa các dấu ngoặc, trước / sau dấu hai chấm và dấu phẩy.
  • Chức năng được cung cấp cho cả trình duyệt web và Node.js.

Tôi sẽ sao chép mã nguồn ở đây để đây không chỉ là một liên kết đến thư viện, nhưng tôi khuyến khích bạn truy cập trang dự án GitHub , vì điều đó sẽ được cập nhật và mã bên dưới sẽ không được cập nhật.

(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

Cảm ơn rất nhiều @all! Dựa trên các câu trả lời trước, đây là một phương pháp biến thể khác cung cấp các quy tắc thay thế tùy chỉnh làm tham số:

 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;
 }

Đối số "rr" là gì?
manking ngày

1
@manking ... quy tắc = $ .extend (quy tắc, ('đối tượng' === typeof rr)? rr: {}); ... đó là mở rộng bộ quy tắc bởi một đối tượng rulset. (có thể bạn tìm thấy các bản cập nhật: github.com/frdl/-Flow/blob/master/api-d/4/js-api/l
Library.js/ chủ



4

Hôm nay tôi gặp phải một vấn đề với mã của @ Pumbaa80. Tôi đang cố gắng áp dụng tô sáng cú pháp JSON cho dữ liệu mà tôi đang hiển thị trong chế độ xem Mithril , vì vậy tôi cần tạo các nút DOM cho mọi thứ trong JSON.stringifyđầu ra.

Tôi chia regex thực sự dài thành các phần thành phần của nó là tốt.

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)

Mã trong bối cảnh trên Github tại đây


4

Đây là một thành phần màu / định dạng JSON đơn giản được viết bằng React:

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>;
};

Xem nó hoạt động trong CodePen này: https://codepen.io/benshope/pen/BxVpjo

Mong rằng sẽ giúp!



3

Nếu bạn cần điều này để làm việc trong một vùng văn bản, giải pháp được chấp nhận sẽ không hoạt động.

<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

Nếu bạn đang tìm kiếm một thư viện đẹp để làm đẹp json trên trang web ...

Prism.js là khá tốt.

http://prismjs.com/

Tôi đã tìm thấy bằng cách sử dụng JSON.opesify (obj, không xác định, 2) để lấy vết lõm, và sau đó sử dụng lăng kính để thêm một chủ đề là một cách tiếp cận tốt.

Nếu bạn đang tải JSON thông qua một cuộc gọi ajax, thì bạn có thể chạy một trong các phương thức tiện ích của Prism để làm đẹp

Ví dụ:

Prism.highlightAll()

1

Cái này đẹp đấy:

https://github.com/mafffy/json-markup từmafintosh

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>

Biểu định kiểu có thể được tìm thấy ở đây

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

1

Không thể tìm thấy bất kỳ giải pháp nào có tô sáng cú pháp tốt cho bảng điều khiển, vì vậy đây là 2p của tôi

Cài đặt & Thêm phụ thuộc cli-highlight

npm install cli-highlight --save

Xác định logjson trên toàn cầu

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

Sử dụng

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

đầu ra


0

Đây là cách bạn có thể in mà không cần sử dụng chức năng gốc.

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

Cách đơn giản nhất để hiển thị một đối tượng cho mục đích gỡ lỗi:

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

Nếu bạn muốn hiển thị đối tượng trong DOM, bạn nên xem xét rằng nó có thể chứa các chuỗi sẽ được hiểu là HTML. Vì vậy, bạn cần phải thực hiện một số thoát ...

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

Để làm nổi bật và làm đẹp nó HTMLbằng cách sử dụng 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>";
        }
    );
}

-1

Tôi khuyên bạn nên sử dụng HighlightJS . Nó sử dụng nguyên tắc giống như câu trả lời được chấp nhận, nhưng cũng hoạt động với nhiều ngôn ngữ khác và có nhiều cách phối màu được xác định trước . Nếu sử dụng RequireJS , bạn có thể tạo mô-đun tương thích với

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

Thế hệ dựa vào Python3 và Java. Thêm -nđể tạo một phiên bản không rút gọn.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.