ładny wydruk JSON za pomocą JavaScript


2425

Jak mogę wyświetlić JSON w łatwym do odczytu (dla czytelników) formacie? Szukam przede wszystkim wcięć i białych znaków, być może nawet kolorów / stylów czcionek / itp.




3
Jeśli tylko wysyłasz dane do HTML, możesz zawinąć je w <pre>tag.
Ryan Walker

Odpowiedzi:


5057

Ładne drukowanie jest implementowane natywnieJSON.stringify() . Trzeci argument umożliwia ładne drukowanie i ustawia odstępy do użycia:

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

Jeśli potrzebujesz podświetlania składni, możesz użyć magii wyrażeń regularnych:

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

Zobacz w akcji tutaj: jsfiddle

Lub pełny fragment podany poniżej:


23
Super super. Dodałem funkcję, aby otworzyć to w nowym oknie do debugowania: var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = window.open (); var html = "<head> <style> pre {kontur: 1px solid #ccc; padding: 5px; margin: 5px;} .string {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
Miły. Nie zapominaj jednak, że potrzebuje css i a <pre>.
NoBugs,

4
z jakiegoś powodu, kiedy go powiadamiam, rzeczywiście pokazuje sformatowany, jednak nadal pokazuje płaski ciąg, gdy wypluwam go do div za pomocą jQuery: $ ("# transactionResponse"). show (). html (prettifyObject (data), null, „\ t”); gdzie prettifyObject to metoda, którą stworzyłem, która zawiera dwie pierwsze linie powyżej.
PositiveGuy,

5
@CoffeeAddict Upewnij się, że Twój #transactionResponseelement ma white-space: pre;styl CSS.
user123444555621

72
Zauważ, że stringify(...)działa na obiektach JSON , a nie na ciągach JSON. Jeśli masz ciąg, musisz JSON.parse(...)najpierw
Vihung

271

Odpowiedź użytkownika Pumbaa80 jest świetna, jeśli masz obiekt, który chcesz wydrukować. Jeśli zaczynasz od prawidłowego ciągu JSON , który chcesz dość wydrukować, musisz najpierw przekonwertować go na obiekt:

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

To buduje obiekt JSON z ciągu, a następnie konwertuje go z powrotem na ciąg za pomocą ładnego wydruku JSON stringify.


11
To zadziałało dla mnie, ale zgłosiłem błąd, JSON.parsewięc zmodyfikowałem go JSON.stringify(jsonString, null, 2). Zależy od twojego JSON / Object.
Jazzy

14
Zauważ, że podczas wyświetlania ciągu musisz zawinąć go w <pre></pre>znaczniki.
Nieuwaga

6
@Jazzy JSON.parseumiera tylko, jeśli masz niepoprawny kod JSON lub jest on już przekonwertowany na obiekt ... upewnij się, że wiesz, z jakim typem danych masz do czynienia przed próbąJSON.parse
Kolob Canyon

@ Rozproszenie uwagi Twój komentarz był dla mnie przydatny, sprawdzę, czy muszę sprawdzić, co dokładnie prerobi.
Dhaval Jardosh,

7
@Jazzy Gdybyś musiał to zrobić, nie miałeś łańcucha JSON, miałeś normalny obiekt. JSON jest zawsze ciągiem. To po prostu ciąg znaków reprezentujący obiekt JavaScript.
Clonkex,

37

Lepszy sposób.

Prettify JSON Array w JavaScript

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

3
Dzięki! To rozwiązanie było tym, czego osobiście szukałem, ponieważ chciałem po prostu umieścić wcięcie JSON w <textarea>
Turbo

2
Jest to lepsze, ponieważ używasz tylko podstawowej funkcji javascript, która nie wymaga dodatkowych obliczeń, co może powodować problemy z wydajnością, jeśli operacja zostanie powtórzona wiele razy. Brakowało mi tylko tego, aby to działało, to znaczniki <pre>.
CL,

Idealne i dokładnie to, czego szukałem! Krótko, słodko i na temat.
John

Łał! Dziękuję Ci! Jest to dla mnie bardzo pomocne.
judian

29

Na podstawie odpowiedzi Pumbaa80 zmodyfikowałem kod, aby używał kolorów console.log (na pewno działa na Chrome), a nie HTML. Dane wyjściowe można zobaczyć w konsoli. Można edytować zmienne _ wewnątrz funkcji, dodając nieco stylu.

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

Oto bookmarklet, którego możesz użyć:

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

Stosowanie:

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

Edycja: Właśnie próbowałem uciec symbol% ​​za pomocą tego wiersza, po deklaracji zmiennych:

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

Ale dowiaduję się, że Chrome nie obsługuje% ucieczki w konsoli. Dziwne ... Może to zadziała w przyszłości.

Twoje zdrowie!

wprowadź opis zdjęcia tutaj


1
Użyłem twojego kodu, ale otrzymuję wynik w formacie json, ale nie otrzymuję koloru, a także w ostatnim otrzymuję znacznik koloru, to jest wynik {{error ": {" code ": 0," message ": "O"}}, kolor: czerwony ,, kolor: czerwony ,, kolor: ciemnyorange
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);

W przypadku wyświetlania w HTML należy dodać balis <pre></pre>

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

Przykład:


1
Co to jest „balis”?
Dan Dascalescu

w języku francuskim oznacza „tag”
Aymeric Bouzy aybbyk

<pre>Jest koniecznością, jeśli pokażesz JSON w A <div>. Wybitny tylko za tę wskazówkę!
Manuel

23

Korzystam z rozszerzenia JSONView Chrome (jest tak ładne, jak to możliwe :):

Edycja: dodano jsonreport.js

Wydałem także niezależną przeglądarkę plików JSON do drukowania w Internecie, jsonreport.js, która zawiera czytelny dla człowieka raport HTML5, którego można użyć do przeglądania dowolnych danych JSON.

Możesz przeczytać więcej o tym formacie w nowym formacie JavaScript HTML5 Report Format .


1
Potrzebowałem biblioteki JavaScript * .js, która mogłaby całkiem wydrukować ciąg JSON, dodając elementy HTML i klasy. Coś w rodzaju var result = prettyPrint ('{„key”: „value”} ”);
Mark

21

Możesz użyć console.dir()skrótu do console.log(util.inspect()). (Jedyna różnica polega na tym, że omija ona dowolną niestandardową inspect()funkcję zdefiniowaną na obiekcie).

Wykorzystuje podświetlanie składni , inteligentne wcięcia , usuwa cudzysłowy z kluczy i sprawia, że ​​dane wyjściowe są tak ładne, jak to tylko możliwe.

const object = JSON.parse(jsonString)

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

i dla wiersza poleceń:

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


Jest jakiś sposób, aby go zdobyć, aby zaczął się rozwijać?
Daniel Sokolowski

Co masz na myśli @DanielSokolowski?
adius

w Chrome Developer Tools muszę kliknąć mały trójkąt, aby dostać się do kluczy obiektów, w jakikolwiek sposób, aby automatycznie go rozwinąć? snag.gy/7wPqsl.jpg
Daniel Sokolowski

Mh Dobre pytanie. Nie jestem świadomy jednego, ale rzeczywiście byłby pomocny…
adius

9

Oto niesamowity kod HTML użytkownika121244555621 przystosowany do terminali. Przydatne do debugowania skryptów węzłów:

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

Stosowanie:

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

7

3
-1; jest to równoważne z wykonywaniem console.debug(data);(przynajmniej) Chrome i Firefox. Nie pokazuje reprezentacji JSON data, a tym bardziej ładnie wydrukowanej.
Mark Amery

1
@MarkAmery 2 lata temu ta funkcja była nowa dla przeglądarki i działa tylko tak, jak to opisałem. Jeśli jesteś zbyt młody - cieszę się z Ciebie! Również podobna składnia console.debug("%s: %o x %d", str, data, cnt);może być komuś pomocna.
gavenkoa

2
Zobacz także, console.dirktóra pozwala nawigować po danych.
Christophe Roussy,

7

Niezadowolony z innych ładnych drukarek dla Ruby, napisałem własny ( NeatJSON ), a następnie przeniosłem go na JavaScript, w tym bezpłatny formatator online . Kod jest darmowy na licencji MIT (dość permisywny).

Funkcje (wszystkie opcjonalne):

  • Ustaw szerokość linii i zawiń w taki sposób, aby obiekty i tablice znajdowały się na tej samej linii, gdy pasują, i zawijaj jedną wartość na linię, gdy nie pasują.
  • Sortuj klucze obiektowe, jeśli chcesz.
  • Wyrównaj klucze obiektów (ustaw dwukropki).
  • Sformatuj liczby zmiennoprzecinkowe do określonej liczby miejsc po przecinku, bez zepsucia liczb całkowitych.
  • Tryb „krótkiego” owijania umieszcza otwierające i zamykające nawiasy klamrowe / nawiasy klamrowe w tym samym wierszu co wartości, zapewniając format preferowany przez niektórych.
  • Szczegółowa kontrola odstępów dla tablic i obiektów, między nawiasami, przed / po dwukropkach i przecinkach.
  • Funkcja jest dostępna zarówno dla przeglądarek internetowych, jak i Node.js.

Skopiuję tutaj kod źródłowy, aby nie był to tylko link do biblioteki, ale zachęcam do przejścia na stronę projektu GitHub , ponieważ będzie on aktualizowany, a poniższy kod nie.

(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

Wielkie dzięki @all! W oparciu o poprzednie odpowiedzi, oto kolejna odmienna metoda zapewniająca niestandardowe reguły zastępowania jako parametr:

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

Co to jest argument „rr”?
manking

1
@manking ... rules = $ .extend (rules, ('object' === typeof rr)? rr: {}); ... polega na rozszerzeniu zestawu reguł o obiekt zestawu reguł. (być może znajdziesz aktualizacje: github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/… )
webfan 28.04.17



4

Dzisiaj napotkałem problem z kodem @ Pumbaa80. Usiłuję zastosować wyróżnianie składni JSON do danych, które renderuję w widoku Mithril , więc muszę utworzyć węzły DOM dla wszystkich danych JSON.stringifywyjściowych.

Podzieliłem też naprawdę długi regex na jego części składowe.

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)

Kod w kontekście na Github tutaj


4

Oto prosty komponent formatu / koloru JSON napisany w 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>;
};

Zobacz, jak działa w tym CodePen: https://codepen.io/benshope/pen/BxVpjo

Mam nadzieję, że to pomaga!



3

Jeśli potrzebujesz tego do pracy w obszarze tekstowym, zaakceptowane rozwiązanie nie będzie działać.

<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

Jeśli szukasz ładnej biblioteki do upiększania JSON na stronie internetowej ...

Prism.js jest całkiem niezły.

http://prismjs.com/

Znalazłem użycie JSON.stringify (obj, undefined, 2), aby uzyskać wcięcie, a następnie użycie pryzmatu do dodania motywu było dobrym podejściem.

Jeśli ładujesz w JSON za pomocą wywołania ajax, możesz uruchomić jedną z metod narzędziowych Prism, aby uzyskać wstępny efekt

Na przykład:

Prism.highlightAll()

1

To jest miłe:

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

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>

Przykładowy arkusz stylów można znaleźć tutaj

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

1

Nie mogłem znaleźć żadnego rozwiązania, które miałoby dobre podświetlanie składni dla konsoli, więc oto mój 2p

Zainstaluj i dodaj zależność cli-highlight

npm install cli-highlight --save

Zdefiniuj logjson globalnie

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

Posługiwać się

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

wynik


0

Polecam używać HighlightJS . Wykorzystuje tę samą zasadę co zaakceptowana odpowiedź, ale działa również w wielu innych językach i ma wiele predefiniowanych schematów kolorów . Jeśli używasz RequireJS , możesz wygenerować kompatybilny moduł z

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

Generacja opiera się na Python3 i Javie. Dodaj, -naby wygenerować niezminimalizowaną wersję.


0

Oto jak możesz drukować bez użycia funkcji natywnej.

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

Najprostszy sposób wyświetlenia obiektu do celów debugowania:

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

Jeśli chcesz wyświetlić obiekt w DOM, powinieneś wziąć pod uwagę, że może on zawierać ciągi znaków, które byłyby interpretowane jako HTML. Dlatego musisz uciec ...

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

Aby wyróżnić i upiększyć go HTMLza pomocą 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>";
        }
    );
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.