Pretty-Print JSON mit JavaScript


2425

Wie kann ich JSON in einem einfach zu lesenden Format (für menschliche Leser) anzeigen? Ich suche hauptsächlich Einrückungen und Leerzeichen, vielleicht sogar Farben / Schriftstile / etc.




4
Wenn Sie nur in HTML ausgeben, können Sie es in ein <pre>Tag einschließen.
Ryan Walker

Antworten:


5058

Pretty-Printing wird nativ in implementiertJSON.stringify() . Das dritte Argument ermöglicht ein hübsches Drucken und legt den zu verwendenden Abstand fest:

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

Wenn Sie eine Syntaxhervorhebung benötigen, können Sie Regex-Magie wie folgt verwenden:

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

Sehen Sie hier in Aktion: jsfiddle

Oder ein vollständiger Ausschnitt unten:


23
Sehr toll. Ich habe eine Funktion hinzugefügt, um diese in einem neuen Fenster zum Debuggen zu öffnen: var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = window.open (); var html = "<head> <style> pre {Umriss: 1px fest #ccc; Polsterung: 5px; Rand: 5px;} .string {Farbe: grün;}"; 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
Nett. Vergiss aber nicht, dass es CSS und A braucht <pre>.
NoBugs

4
Aus irgendeinem Grund wird beim Benachrichtigen zwar formatiert angezeigt, es wird jedoch immer noch eine flache Zeichenfolge angezeigt, wenn ich sie über jQuery an ein div ausspucke: $ ("# transactionResponse"). show (). html (prettifyObject (data), null, '\ t'); Dabei ist prettifyObject eine von mir erstellte Methode, die Ihre ersten beiden Zeilen oben enthält.
PositiveGuy

5
@CoffeeAddict Stellen Sie sicher, dass Ihr #transactionResponseElement white-space: pre;einen CSS-Stil hat.
user123444555621

72
Beachten Sie, dass dies stringify(...)für JSON- Objekte und nicht für JSON-Zeichenfolgen funktioniert . Wenn Sie eine Zeichenfolge haben, müssen Sie JSON.parse(...)zuerst
Vihung

271

Die Antwort von Benutzer Pumbaa80 ist großartig, wenn Sie ein Objekt haben, das Sie schön drucken möchten. Wenn Sie von einer gültigen JSON- Zeichenfolge ausgehen , die Sie hübsch drucken möchten, müssen Sie sie zuerst in ein Objekt konvertieren:

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

Dadurch wird ein JSON-Objekt aus der Zeichenfolge erstellt und anschließend mithilfe des hübschen Drucks von JSON stringify wieder in eine Zeichenfolge konvertiert.


11
Dies funktionierte für mich, warf aber einen Fehler mit, JSON.parseso dass ich ihn modifizierte JSON.stringify(jsonString, null, 2). Hängt von Ihrem JSON / Objekt ab.
Jazzy

15
Beachten Sie, dass Sie die Zeichenfolge beim Anzeigen in <pre></pre>Tags einschließen müssen.
Undistraction

6
@Jazzy JSON.parsestirbt nur, wenn Sie eine ungültige JSON- Zeichenfolge haben oder diese bereits in ein Objekt konvertiert ist. Stellen Sie sicher, dass Sie wissen, mit welchem ​​Datentyp Sie es zu tun haben, bevor Sie versuchenJSON.parse
Kolob Canyon

7
@Jazzy Wenn Sie das tun mussten, hatten Sie keine JSON-Zeichenfolge, Sie hatten ein normales Objekt. JSON ist immer eine Zeichenfolge. Es ist nur eine stringbasierte Darstellung eines Javascript-Objekts.
Clonkex

37

Besserer Weg.

Verschönern Sie das JSON-Array in Javascript

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

3
Vielen Dank! Diese Lösung ist das, wonach ich persönlich gesucht habe, weil ich einfach einen eingerückten JSON in einen <Textbereich> einfügen wollte
Turbo

2
Dies ist besser, da Sie nur die grundlegende Javascript-Funktion verwenden, für die keine zusätzlichen Berechnungen erforderlich sind. Dies kann zu Leistungsproblemen führen, wenn der Vorgang viele Male wiederholt wird. Das einzige, was mir fehlte, waren <pre> -Tags.
CL

Perfekt und genau das, wonach ich gesucht habe! Kurz, süß und auf den Punkt.
John

Beeindruckend! Vielen Dank! Es ist sehr hilfreich für mich.
Judian

29

Basierend auf der Antwort von Pumbaa80 habe ich den Code so geändert, dass die Farben console.log (die sicher auf Chrome funktionieren) und nicht HTML verwendet werden. Die Ausgabe kann in der Konsole angezeigt werden. Sie können die _Variablen in der Funktion bearbeiten und etwas mehr Stil hinzufügen.

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

Hier ist ein Lesezeichen, das Sie verwenden können:

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

Verwendungszweck:

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

Bearbeiten: Ich habe gerade versucht, das% -Symbol mit dieser Zeile nach der Variablendeklaration zu umgehen:

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

Aber ich finde heraus, dass Chrome% Escape in der Konsole nicht unterstützt. Seltsam ... Vielleicht funktioniert das in Zukunft.

Prost!

Geben Sie hier die Bildbeschreibung ein


1
Ich habe deinen Code verwendet, aber ich bekomme die Ausgabe im JSON-Format, aber ich bekomme nicht die Farbe und auch im letzten bekomme ich ein Farb-Tag. Dies ist die Ausgabe {"Fehler": {"Code": 0, "Nachricht": "O"}}, Farbe: rot ,, Farbe: rot ,, Farbe: 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);

Bei der Anzeige in HTML sollten Sie einen Balise hinzufügen <pre></pre>

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

Beispiel:


1
Was ist ein "Balise"?
Dan Dascalescu

es bedeutet "Tag" in Französisch
Aymeric Bouzy Aybbyk

Dies <pre>ist ein Muss, wenn Sie den JSON in a anzeigen <div>. Nur für diesen Hinweis positiv bewertet!
Manuel

23

Ich benutze die JSONView Chrome-Erweiterung (sie ist so hübsch wie es nur geht :):

Bearbeiten: hinzugefügt jsonreport.js

Ich habe auch einen eigenständigen Online-JSON-Pretty-Print-Viewer, jsonreport.js, veröffentlicht, der einen für Menschen lesbaren HTML5-Bericht bereitstellt, mit dem Sie alle JSON-Daten anzeigen können.

Weitere Informationen zum Format finden Sie im neuen JavaScript HTML5-Berichtsformat .


1
Ich brauchte eine Javascript * .js-Bibliothek, die eine JSON-Zeichenfolge drucken konnte, die HTML-Elemente und -Klassen hinzufügte. So etwas wie var result = prettyPrint ('{"key": "value"}');
Mark

21

Sie können verwenden console.dir(), was eine Verknüpfung für ist console.log(util.inspect()). (Der einzige Unterschied besteht darin, dass alle inspect()für ein Objekt definierten benutzerdefinierten Funktionen umgangen werden.)

Es verwendet Syntaxhervorhebung , intelligentes Einrücken , entfernt Anführungszeichen von Tasten und macht die Ausgabe so hübsch wie es nur geht.

const object = JSON.parse(jsonString)

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

und für die Kommandozeile:

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


Wie kann man es bekommen, damit es erweitert wird?
Daniel Sokolowski

Was meinst du mit @DanielSokolowski?
Adius

In den Chrome Developer Tools muss ich auf das kleine Dreieck klicken, um zu den Objekttasten zu gelangen. Wie kann es automatisch erweitert werden? snag.gy/7wPqsl.jpg
Daniel Sokolowski

Mh. Gute Frage. Ich bin mir keiner bewusst, aber es wäre in der Tat hilfreich ...
Adius

9

Hier ist User123444555621s fantastisches HTML, das für Terminals angepasst ist. Praktisch zum Debuggen von Node-Skripten:

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

Verwendungszweck:

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

7

3
-1; Dies entspricht nur console.debug(data);(zumindest) Chrome und Firefox. Es zeigt keine JSON-Darstellung von data, geschweige denn eine hübsch gedruckte.
Mark Amery

1
@MarkAmery Vor 2 Jahren war diese Funktion neu für den Browser und funktioniert nur wie beschrieben. Wenn Sie zu jung sind - ich freue mich für Sie! Auch Syntax wie console.debug("%s: %o x %d", str, data, cnt);kann für jemanden noch hilfreich sein.
Gavenkoa

2
Schauen Sie auch nach, console.dirwelche die Daten navigieren können.
Christophe Roussy

7

Unzufrieden mit anderen hübschen Druckern für Ruby schrieb ich meinen eigenen ( NeatJSON ) und portierte ihn dann auf JavaScript, einschließlich eines kostenlosen Online-Formatierers . Der Code ist unter MIT-Lizenz kostenlos (recht zulässig).

Funktionen (alle optional):

  • Legen Sie eine Linienbreite fest und umbrechen Sie Objekte und Arrays so, dass sie beim Anpassen in derselben Linie bleiben. Wenn dies nicht der Fall ist, wird ein Wert pro Zeile umbrochen.
  • Sortieren Sie Objektschlüssel, wenn Sie möchten.
  • Richten Sie die Objektschlüssel aus (richten Sie die Doppelpunkte aus).
  • Formatieren Sie Gleitkommazahlen auf eine bestimmte Anzahl von Dezimalstellen, ohne die Ganzzahlen durcheinander zu bringen.
  • Der Umbruchmodus "Kurz" setzt das Öffnen und Schließen von Klammern / Klammern in dieselbe Zeile wie die Werte und bietet ein Format, das einige bevorzugen.
  • Detaillierte Kontrolle des Abstands für Arrays und Objekte zwischen Klammern, vor / nach Doppelpunkten und Kommas.
  • Die Funktion wird sowohl Webbrowsern als auch Node.js zur Verfügung gestellt.

Ich werde den Quellcode hier kopieren, damit dies nicht nur ein Link zu einer Bibliothek ist, sondern ich empfehle Ihnen, zur GitHub-Projektseite zu gehen , da dieser auf dem neuesten Stand gehalten wird und der folgende Code nicht.

(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

Vielen Dank @all! Basierend auf den vorherigen Antworten ist hier eine andere Variantenmethode, die benutzerdefinierte Ersetzungsregeln als Parameter bereitstellt:

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

Was ist das Argument "rr"?
Manking

1
@manking ... rules = $ .extend (rules, ('object' === typeof rr)? rr: {}); ... es soll den Regelsatz um ein Rulset-Objekt erweitern. (Vielleicht finden Sie Updates: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/… )
Webfan



4

Ich bin heute auf ein Problem mit dem Code von @ Pumbaa80 gestoßen. Ich versuche, die JSON-Syntaxhervorhebung auf Daten anzuwenden, die ich in einer Mithril- Ansicht rendere. Daher muss ich DOM-Knoten für alles in der JSON.stringifyAusgabe erstellen .

Ich habe den wirklich langen regulären Ausdruck auch in seine Bestandteile aufgeteilt.

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)

Code im Kontext auf Github hier


4

Hier ist eine einfache JSON-Format- / Farbkomponente, die in React geschrieben wurde:

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

Sehen Sie, wie es in diesem CodePen funktioniert: https://codepen.io/benshope/pen/BxVpjo

Ich hoffe, das hilft!



3

Wenn Sie dies benötigen, um in einem Textbereich zu arbeiten, funktioniert die akzeptierte Lösung nicht.

<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

Wenn Sie nach einer schönen Bibliothek suchen, um json auf einer Webseite zu verschönern ...

Prism.js ist ziemlich gut.

http://prismjs.com/

Ich fand, dass die Verwendung von JSON.stringify (obj, undefined, 2) zum Abrufen der Einrückung und die Verwendung von Prisma zum Hinzufügen eines Themas ein guter Ansatz war.

Wenn Sie in JSON über einen Ajax-Aufruf laden, können Sie eine der Prism-Dienstprogrammmethoden zum Verschönern ausführen

Zum Beispiel:

Prism.highlightAll()

1

Das ist nett:

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

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>

Ein Beispiel für ein Stylesheet finden Sie hier

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

1

Es konnte keine Lösung gefunden werden, die eine gute Syntaxhervorhebung für die Konsole aufweist. Hier ist meine 2p

Installieren und Hinzufügen der CLI-Highlight-Abhängigkeit

npm install cli-highlight --save

Definieren Sie logjson global

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

Verwenden

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

Ausgabe


0

Ich empfehle die Verwendung von HighlightJS . Es verwendet das gleiche Prinzip wie die akzeptierte Antwort, funktioniert jedoch auch für viele andere Sprachen und verfügt über viele vordefinierte Farbschemata . Wenn Sie RequireJS verwenden , können Sie ein kompatibles Modul mit generieren

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

Die Generierung basiert auf Python3 und Java. Hinzufügen -n, um eine nicht minimierte Version zu generieren.


0

So können Sie ohne native Funktion drucken.

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

Der einfachste Weg, ein Objekt für Debugging-Zwecke anzuzeigen:

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

Wenn Sie das Objekt im DOM anzeigen möchten, sollten Sie berücksichtigen, dass es Zeichenfolgen enthalten kann, die als HTML interpretiert werden. Deshalb müssen Sie etwas entkommen ...

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

So heben Sie es hervor und verschönern es HTMLmit 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>";
        }
    );
}
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.