JavaScript kullanarak güzel baskı JSON


Yanıtlar:


5058

Güzel baskı yerel olarak uygulanırJSON.stringify() . Üçüncü argüman güzel yazdırmayı mümkün kılar ve kullanılacak aralığı ayarlar:

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

Sözdizimi vurgulamasına ihtiyacınız varsa, şöyle bir regex büyüsü kullanabilirsiniz:

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

Buradaki eyleme bakın: jsfiddle

Veya aşağıda sağlanan tam bir snippet:


23
Süper harika. Bu hata ayıklama için yeni bir pencerede açmak için bir işlev ekledi: var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = window.open (); var html = "<head> <style> pre {anahat: 1px katı #ccc; dolgu: 5px; kenar boşluğu: 5px;} .string {renk: yeşil;}"; 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
Güzel. <pre>Yine de css ve a'ya ihtiyacı olduğunu unutmayın .
NoBugs

4
nedense, ne zaman onu uyarmak, gerçekten biçimlendirilmiş gösterir ancak ben jQuery üzerinden bir div tükürdüğümde hala düz bir dize gösterir: $ ("# transactionResponse"). show (). html (prettifyObject (veri), null, '\ t'); Burada prettifyObject, yukarıdaki ilk iki satırınızı içeren oluşturduğum bir yöntemdir.
PositiveGuy

5
Senin emin olun @CoffeeAddict #transactionResponseeleman vardır white-space: pre;CSS tarzı olarak.
user123444555621

72
Not stringify(...)JSON çalışır nesneleri değil JSON dizeleri üzerinde. Eğer bir ipin varsa, JSON.parse(...)önce
Vihung

271

Pumbaa80'in cevabı, oldukça yazdırılmasını istediğiniz bir nesneniz varsa harika . Oldukça yazdırmak istediğiniz geçerli bir JSON dizesinden başlıyorsanız, önce onu bir nesneye dönüştürmeniz gerekir:

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

Bu, dizeden bir JSON nesnesi oluşturur ve ardından JSON stringify'ın güzel baskısını kullanarak nesneyi bir dizeye dönüştürür.


11
Bu benim için çalıştı, ama kullanmak için bir hata attı JSON.parseböylece ben değiştirdim JSON.stringify(jsonString, null, 2). JSON / Object'inize bağlıdır.
Jazzy

15
Dizeyi görüntülerken onu <pre></pre>etiketlere sarmanız gerektiğini unutmayın .
Dağılma

6
@Jazzy JSON.parsesadece geçersiz bir JSON str'niz varsa veya zaten bir nesneye dönüştürülmüşse ölür ... denemeden önce hangi veri JSON.parse
Kolob Canyon

7
@Jazzy Bunu yapmak zorunda olsaydınız, bir JSON dizeniz yoktu, normal bir nesneniz vardı. JSON her zaman bir dizedir. Bu sadece bir Javascript nesnesinin dize tabanlı gösterimidir.
Clonkex

37

Daha iyi yol.

Javascript'te JSON Dizisini Güzelleştirme

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

3
Teşekkürler! Bu çözüm kişisel olarak aradığım şeydi çünkü sadece bir <textarea> içine girintili bir JSON koymak istedim
Turbo

2
Bu daha iyidir çünkü yalnızca işlem birçok kez tekrarlanırsa performans sorunlarına neden olabilecek ek hesaplama gerektirmeyen temel javascript işlevini kullanırsınız. Benim için tek şey eksikti bu çalışmak için <pre> etiketleri.
CL

Mükemmel ve tam olarak ne aradığını! Kısa, tatlı ve anlamlı.
John

Vaov! teşekkür ederim! Benim için bu çok yararlı.
judian

29

Pumbaa80'in cevabına dayanarak, HTML'yi değil, console.log renklerini (kesin olarak Chrome üzerinde çalışıyor) kullanmak için kodu değiştirdim. Çıktı konsolun içinde görülebilir. Daha fazla stil ekleyerek işlevin içindeki _ değişkenleri düzenleyebilirsiniz.

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

İşte kullanabileceğiniz bir yer işareti:

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

Kullanımı:

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

Düzenleme: Ben sadece değişkenler bildirimi sonra, bu çizgi ile% sembolü kaçmaya çalıştı:

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

Ancak Chrome'un konsolda kaçmayı% desteklemediğini öğrendim. Garip ... Belki bu gelecekte işe yarayacaktır.

Şerefe!

resim açıklamasını buraya girin


1
Ur kodu kullandım ama json formatında çıktı alıyorum ama renk almıyorum ve ayrıca son ben renk etiketi alıyorum bu çıktı {"hata": {"kod": 0, "mesaj": "O"}}, renk: kırmızı ,, renk: kırmızı ,, renk: 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);

HTML'de görüntüleniyorsa, bir balya eklemeniz gerekir <pre></pre>

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

Misal:


1
"Balise" nedir?
Dan Dascalescu

Fransızca "tag" anlamına gelir
Aymeric Bouzy aybbyk

<pre>Bir JSON gösterirseniz bir zorunluluktur <div>. Sadece bu ipucu için oylandı!
Manuel

23

Kullandığım JSONView Chrome uzantısını o :) alır gibi o kadar güzel (:

Düzenle: eklendi jsonreport.js

Ayrıca, herhangi bir JSON verisini görüntülemek için kullanabileceğiniz, insan tarafından okunabilir bir HTML5 raporu sağlayan çevrimiçi bağımsız bir JSON güzel baskı görüntüleyicisi olan jsonreport.js'yi de yayınladım.

Biçim hakkında daha fazla bilgiyi Yeni JavaScript HTML5 Rapor Biçimi'nde okuyabilirsiniz .


1
Ben oldukça html öğeleri ve sınıfları ekleyerek bir JSON dizesi yazdırabilirsiniz bir Javascript * .js kitaplığı gerekiyordu. Var results = prettyPrint ('{"key": "value"}') gibi bir şey;
Mark

21

Bunun console.dir()için bir kısayol olan kullanabilirsiniz console.log(util.inspect()). (Tek fark, inspect()bir nesne üzerinde tanımlanan herhangi bir özel işlevi atlamasıdır .)

Sözdizimi vurgulama , akıllı girinti kullanır , tırnaklardan anahtarları kaldırır ve çıktıyı olabildiğince güzel yapar.

const object = JSON.parse(jsonString)

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

ve komut satırı için:

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


Genişletmeye başlamanın herhangi bir yolu var mı?
Daniel Sokolowski

Ne demek istiyorsun @DanielSokolowski?
adius

Chrome Geliştirici Araçları'nda Nesnelerin anahtarlarını almak için küçük üçgeni tıklatmam gerekiyor, otomatik olarak genişletilmesi için herhangi bir yol var mı? snag.gy/7wPqsl.jpg
Daniel Sokolowski

Mh. İyi soru. Birinin farkında değilim, ama gerçekten yardımcı olur ...
adius

9

Kullanıcı123444555621'nin terminaller için uyarlanmış harika HTML'si. Düğüm komut dosyalarında hata ayıklamak için kullanışlı:

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

Kullanımı:

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

7

Hata ayıklama amacıyla kullanıyorum:

console.debug ("% o", veri);

3
1; bu yalnızca console.debug(data);(en azından) Chrome ve Firefox'ta yapmaya eşdeğerdir . dataOldukça basılı olanların bir JSON temsilini göstermiyor .
Mark Amery

1
@MarkAmery 2 yıl önce bu özellik tarayıcı için yeniydi ve sadece açıkladığım gibi çalışıyor. Eğer çok gençsen - senin için mutluyum! Ayrıca sözdizimi console.debug("%s: %o x %d", str, data, cnt);birisine yine de yardımcı olabilir.
gavenkoa

2
Ayrıca console.dirhangi verilerde gezinebileceğinize bakın.
Christophe Roussy

7

Ruby için diğer güzel yazıcılardan memnun kalmadım, kendi ( NeatJSON ) yazdım ve daha sonra ücretsiz bir çevrimiçi formatlayıcı da dahil olmak üzere JavaScript'e taşıdım . Kod MIT lisansı altında ücretsizdir (oldukça izin verilir).

Özellikler (tümü isteğe bağlı):

  • Bir çizgi genişliği ayarlayın ve nesneleri ve dizileri sığdıklarında aynı çizgide tutacak şekilde sarın, sığmadıklarında her satıra bir değer sarın.
  • İsterseniz nesne anahtarlarını sıralayın.
  • Nesne anahtarlarını hizalayın (iki nokta üst üste koyun).
  • Tamsayıları bozmadan kayan nokta sayılarını belirli ondalık sayılara biçimlendirin.
  • 'Kısa' sarma modu, açılış ve kapanış parantezlerini / parantezlerini değerlerle aynı satıra koyar ve bazılarının tercih ettiği bir format sağlar.
  • İki nokta üst üste ve virgüllerden önce / sonra, parantezler arasında diziler ve nesneler için boşluk üzerinde granüler kontrol
  • İşlev hem web tarayıcıları hem de Node.js için kullanılabilir.

Kaynak kodunu buraya kopyalayacağım, böylece bu sadece bir kütüphanenin bağlantısı değil, aynı zamanda güncel tutulacak ve aşağıdaki kod da olmayacağı için GitHub proje sayfasına gitmenizi tavsiye ediyorum .

(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

Çok teşekkürler @all! Önceki yanıtlara dayanarak, parametre olarak özel değiştirme kuralları sağlayan başka bir varyant yöntemi:

 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" argümanı nedir?
manking

1
@manking ... rules = $ .extend (kurallar, ('object' === typeof rr)? rr: {}); ... kural kümesini bir rulset nesnesi ile genişletmektir. (belki güncellemeleri bulabilirsiniz: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/… )
webfan



4

Bugün @ Pumbaa80 koduyla ilgili bir sorunla karşılaştım. Bir Mithril görünümünde oluşturduğum verilere JSON sözdizimi vurgulama uygulamak çalışıyorum , bu yüzden her şey için DOM düğümleri oluşturmak gerekirJSON.stringify çıktı .

Gerçekten uzun regex'i bileşen parçalarına da böldüm.

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 bağlamında kod burada


4

React ile yazılmış basit bir JSON formatı / renk bileşeni:

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

Bu CodePen'de çalıştığını görün: https://codepen.io/benshope/pen/BxVpjo

Umarım yardımcı olur!



3

Bir metin alanında çalışmak için buna ihtiyacınız varsa, kabul edilen çözüm çalışmaz.

<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

Bir web sayfasında json'u güzelleştirmek için güzel bir kütüphane arıyorsanız ...

Prism.js oldukça iyi.

http://prismjs.com/

Girintiyi almak için JSON.stringify (obj, undefined, 2) kullanarak buldum ve sonra bir tema eklemek için prizma kullanarak iyi bir yaklaşım oldu.

JSON'a ajax çağrısı yoluyla yüklüyorsanız, prizma için Prizma'nın yardımcı yöntemlerinden birini çalıştırabilirsiniz.

Örneğin:

Prism.highlightAll()

1

Bu güzel:

https://github.com/mafintosh/json-markup danmafintosh

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>

Örnek stil sayfasını burada bulabilirsiniz

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

1

Konsol için iyi bir sözdizimi vurgulaması olan herhangi bir çözüm bulunamadı, bu yüzden 2p'im

Klip vurgulama bağımlılığını yükleme ve ekleme

npm install cli-highlight --save

Logjson'u global olarak tanımlayın

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

kullanım

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

çıktı


0

HighlightJS kullanmanızı öneririm . Kabul edilen cevapla aynı prensibi kullanır , ancak diğer birçok dil için de çalışır ve önceden tanımlanmış birçok renk şemasına sahiptir . RequireJS kullanıyorsanız , aşağıdakilerle uyumlu bir modül oluşturabilirsiniz:

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

Nesil Python3 ve Java'ya dayanır. -nKüçültülmemiş bir sürüm oluşturmak için ekleyin .


0

Yerel işlevi kullanmadan nasıl yazdırabileceğiniz aşağıda açıklanmıştır.

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

Bir nesneyi hata ayıklama amacıyla görüntülemenin en basit yolu:

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

Nesneyi DOM'de görüntülemek istiyorsanız, nesnenin HTML olarak yorumlanacak dizeler içerebileceğini düşünmelisiniz. Bu nedenle, kaçmak zorundasınız ...

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

Bunu HTMLkullanarak vurgulamak ve güzelleştirmek için 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>";
        }
    );
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.