JavaScript를 사용하여 예쁘게 인쇄 된 JSON


2425

사람이 쉽게 읽을 수있는 형식으로 JSON을 표시하려면 어떻게해야합니까? 나는 주로 색상 / 글꼴 스타일 등으로 들여 쓰기와 공백을 찾고 있습니다.




3
html로 출력하는 경우 <pre>태그로 묶을 수 있습니다 .
Ryan Walker

답변:


5058

프리티 프린팅은로 기본적으로 구현됩니다JSON.stringify() . 세 번째 인수는 예쁜 인쇄를 가능하게하고 간격을 사용하도록 설정합니다.

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

구문 강조가 필요한 경우 다음과 같은 정규식 마술을 사용할 수 있습니다.

function syntaxHighlight(json) {
    if (typeof json != 'string') {
         json = JSON.stringify(json, undefined, 2);
    }
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}

jsfiddle의 실제 동작보기

또는 아래에 제공된 전체 스 니펫 :


23
대단해 디버깅을 위해 새 창에서이를 열 수있는 기능을 추가했습니다. var json = syntaxHighlight (JSON.stringify (obj, undefined, 4);); var w = window.open (); var html = "<head> <style> pre {outline : 1px solid #ccc; padding : 5px; margin : 5px;} .string {color : green;}"; html + = ".number {색상 : darkorange;} .boolean {색상 : 파랑;} .null {색상 : 마젠타;} .key {색상 : 빨강;} </ style> </ head> <body>"; html + = "<pre>"+ json + "</ pre>"; w.document.writeln (html);
JayCrossler

16
좋은. <pre>그러나 CSS와 a가 필요하다는 것을 잊지 마십시오 .
NoBugs

4
어떤 이유로 든, 그것을 경고 할 때 실제로 형식이 표시되지만 jQuery를 통해 div에 뱉어 낼 때 여전히 플랫 문자열을 표시합니다 : $ ( "# transactionResponse"). show (). html (prettifyObject (data), null, '\ t'); 여기서 prettifyObject는 위의 첫 두 줄을 포함하는 내가 만든 방법입니다.
PositiveGuy

5
@CoffeeAddict #transactionResponse요소가 white-space: pre;CSS 스타일 인지 확인하십시오 .
user123444555621

72
참고 stringify(...)JSON에서 작동은 개체를 하지 JSON 문자열에. 끈이 있다면 JSON.parse(...)먼저 해야합니다
Vihung

271

Pumbaa80 사용자의 대답은 예쁘게 인쇄하고 싶은 물체 가 있다면 좋습니다 . 예쁘게 인쇄하려는 유효한 JSON 문자열 에서 시작하는 경우 먼저 이를 객체로 변환해야합니다.

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

문자열에서 JSON 객체를 작성한 다음 JSON stringify의 예쁜 글씨를 사용하여 문자열로 다시 변환합니다.


11
이것은 나를 위해 일했지만 오류를 발생 JSON.parse시켜서로 수정했습니다 JSON.stringify(jsonString, null, 2). JSON / Object에 따라 다릅니다.
재즈

14
문자열을 표시 할 때는 <pre></pre>태그 로 묶어야합니다 .
Undistraction

6
@Jazzy은 JSON.parse단지 잘못된 JSON의 STR이 있거나 이미 객체로 변환됩니다 ... 당신이하기 전에 다루고있는 데이터 유형 알고 있는지 확인하면 죽는다JSON.parse
계산법 캐년

7
@Jazzy 당신이 그렇게해야한다면, 당신은 JSON 문자열이 없으며 정상적인 객체를 가지고 있습니다. JSON은 항상 문자열입니다. Javascript 객체의 문자열 기반 표현 일뿐입니다.
Clonkex

37

더 좋은 방법.

자바 스크립트로 JSON 배열을 확인

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

3
감사! 이 솔루션은 <textarea>에 들여 쓰기 된 JSON을 넣고 싶었 기 때문에 개인적으로 찾고 있던 것입니다
Turbo

2
추가 계산이 필요하지 않은 기본 자바 스크립트 함수 만 사용하기 때문에 작업이 여러 번 반복 될 경우 성능 문제가 발생할 수 있습니다. 이것이 작동하는 것은 <pre> 태그였습니다.
CL

내가 찾던 완벽하고 정확하게! 짧고 달콤하며 요점.
John

와! 감사합니다! 그것은 나에게 매우 도움이됩니다.
judian

29

Pumbaa80의 답변을 기반으로 HTML이 아닌 console.log 색상 (Chrome에서 작동 함)을 사용하도록 코드를 수정했습니다. 콘솔 내에서 출력을 볼 수 있습니다. 더 많은 스타일을 추가하여 함수 내에서 _variables를 편집 할 수 있습니다.

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

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

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

    arr.unshift(json);

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

다음은 사용할 수있는 북마크입니다.

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

용법:

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

편집 : 변수 선언 후이 줄로 % 기호를 이스케이프하려고했습니다.

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

그러나 Chrome이 콘솔에서 % 이스케이프를 지원하지 않는 것으로 나타났습니다. 이상해 ... 아마도 이것이 나중에 작동 할 것입니다.

건배!

여기에 이미지 설명을 입력하십시오


1
나는 ur 코드를 사용했지만 json 형식으로 출력을 얻지 만 색상을 얻지 못하고 마지막으로 색상 태그를 얻습니다. 이것은 출력 ""error ": {"code ": 0,"message ": "O"}}, 색상 : 빨간색 ,, 색상 : 빨간색 ,, 색상 : 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로 표시하는 경우 balise를 추가해야합니다 <pre></pre>

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

예:


1
"밸리"란 무엇입니까?
Dan Dascalescu

그것은 프랑스어로 "태그"를 의미
Aymeric의 Bouzy aybbyk

<pre>당신이에서 JSON을 보여 주면 필수입니다 <div>. 그 힌트만을 위해 찬성했습니다!
마누엘

23

JSONView Chrome 확장 프로그램을 사용합니다 .

편집 : 추가 jsonreport.js

또한 JSON 데이터를 보는 데 사용할 수있는 사람이 읽을 수있는 HTML5 보고서를 제공하는 온라인 독립형 JSON 프리티 프린트 뷰어 인 jsonreport.js를 출시했습니다.

새 JavaScript HTML5 보고서 형식에서 형식에 대한 자세한 내용을 읽을 수 있습니다 .


1
html 요소와 클래스를 추가하는 JSON 문자열을 인쇄 할 수있는 Javascript * .js 라이브러리가 필요했습니다. var result = prettyPrint ( '{ "key": "value"}')와 같은 것;
Mark

21

console.dir()바로 가기 인을 사용할 수 있습니다 console.log(util.inspect()). 유일한 차이점은 inspect()객체에 정의 된 사용자 정의 함수를 무시한다는 것 입니다.

그것은 사용하는 구문 강조 , 스마트 들여 쓰기 , 키 삭제합니다 따옴표를 그냥 꽤가수록로 출력한다.

const object = JSON.parse(jsonString)

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

그리고 커맨드 라인 :

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


확장을 시작할 수있는 방법이 있습니까?
Daniel Sokolowski

@DanielSokolowski은 무슨 뜻인가요?
adius

Chrome 개발자 도구에서 작은 삼각형을 클릭하여 객체 키를 가져와야합니다. 자동으로 확장 할 수 있습니까? snag.gy/7wPqsl.jpg
다니엘

ㅁ 좋은 질문. 나도 모르지만 실제로 도움이 될 것입니다…
adius

9

터미널에 적합한 user123444555621의 멋진 HTML이 있습니다. 노드 스크립트 디버깅에 편리합니다.

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

용법:

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

7

디버깅 목적으로 다음을 사용합니다.

console.debug ( "% o", 데이터);

3
-1; 이것은 console.debug(data);적어도 Chrome 및 Firefox에서 수행하는 것과 같습니다 . data예쁘게 인쇄 된 것 뿐만 아니라의 JSON 표현은 표시하지 않습니다 .
Mark Amery

1
@MarkAmery 2 년 전이 기능은 브라우저에 새로운 기능이며 설명 된 대로만 작동합니다. 당신이 너무 어리다면-나는 당신을 위해 행복 해요! 또한 같은 구문 console.debug("%s: %o x %d", str, data, cnt);은 여전히 ​​누군가에게 도움이 될 수 있습니다.
gavenkoa

2
또한 console.dir데이터를 탐색 할 수있는 방법 도 살펴보십시오 .
Christophe Roussy

7

Ruby의 다른 예쁜 프린터에 만족하지 않으면 서 내 자신의 NeatJSON을 작성 하고 무료 온라인 포맷터를 포함 하여 JavaScript포팅했습니다 . 코드는 MIT 라이센스에 따라 무료입니다 (quite permissive).

기능 (모든 옵션) :

  • 줄 너비를 설정하고 객체와 배열이 맞을 때 같은 줄에 유지하는 방식으로 줄 바꿈하여 줄당 하나의 값을 줄 바꿈합니다.
  • 원하는 경우 객체 키를 정렬하십시오.
  • 객체 키를 정렬합니다 (콜론을 정렬).
  • 정수를 엉망으로 만들지 않고 부동 소수점 숫자를 특정 소수 자릿수로 포맷합니다.
  • '짧은'줄 바꿈 모드는 값과 같은 줄에 여는 괄호 / 괄호를 묶어 선호하는 형식을 제공합니다.
  • 콜론과 쉼표 전후에 대괄호 사이, 배열과 객체의 간격을 세밀하게 제어합니다.
  • 기능은 웹 브라우저와 Node.js 모두에서 사용할 수 있습니다.

여기에 소스 코드를 복사하여 라이브러리에 대한 링크가 아니라 GitHub 프로젝트 페이지 로 이동하는 것이 좋습니다 .GitHub 프로젝트 페이지 는 최신 상태로 유지되며 아래 코드는 그렇지 않습니다.

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

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

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

  return build(value,'');

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

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

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

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

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

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

5

감사합니다 @all! 이전 답변을 바탕으로 맞춤 교체 규칙을 매개 변수로 제공하는 또 다른 변형 방법이 있습니다.

 renderJSON : function(json, rr, code, pre){
   if (typeof json !== 'string') {
      json = JSON.stringify(json, undefined, '\t');
   }
  var rules = {
   def : 'color:black;',    
   defKey : function(match){
             return '<strong>' + match + '</strong>';
          },
   types : [
       {
          name : 'True',
          regex : /true/,
          type : 'boolean',
          style : 'color:lightgreen;'
       },

       {
          name : 'False',
          regex : /false/,
          type : 'boolean',
          style : 'color:lightred;'
       },

       {
          name : 'Unicode',
          regex : /"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?/,
          type : 'string',
          style : 'color:green;'
       },

       {
          name : 'Null',
          regex : /null/,
          type : 'nil',
          style : 'color:magenta;'
       },

       {
          name : 'Number',
          regex : /-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/,
          type : 'number',
          style : 'color:darkorange;'
       },

       {
          name : 'Whitespace',
          regex : /\s+/,
          type : 'whitespace',
          style : function(match){
             return '&nbsp';
          }
       } 

    ],

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

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

  };

  if('undefined' !== typeof jQuery){
     rules = $.extend(rules, ('object' === typeof rr) ? rr : {});  
  }else{
     for(var k in rr ){
        rules[k] = rr[k];
     }
  }
    var str = json.replace(/([\,\.\}\{\[\]]|"(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
    var i = 0, p;
    if (rules.punctuation.regex.test(match)) {
               if('string' === typeof rules.punctuation.style){
                   return '<span style="'+ rules.punctuation.style + '">' + match + '</span>';
               }else if('function' === typeof rules.punctuation.style){
                   return rules.punctuation.style(match);
               } else{
                  return match;
               }            
    }

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

     }

    });

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

"rr"인수 란 무엇입니까?
14

1
@manking ... rules = $ .extend (rules, ( 'object'=== typeof rr)? rr : {}); ... 규칙 세트를 룰 세트 오브젝트로 확장하는 것입니다. (어쩌면 업데이트를 찾을 수 있습니다 : github.com/frdl/-Flow/blob/master/api-d/4/js-api/library.js/… )
webfan



4

@ Pumbaa80의 코드로 오늘 문제가 발생했습니다. Mithril 보기 에서 렌더링하는 데이터에 JSON 구문 강조를 적용하려고 하므로 JSON.stringify출력의 모든 것에 대해 DOM 노드를 만들어야합니다 .

정말 긴 정규 표현식을 구성 요소 부분으로 나눕니다.

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

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

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

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

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

여기 Github의 컨텍스트 코드


4

다음은 React로 작성된 간단한 JSON 형식 / 색상 구성 요소입니다.

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

이 CodePen에서 작동하는 것을 참조하십시오 : https://codepen.io/benshope/pen/BxVpjo

희망이 도움이됩니다!



3

텍스트 영역에서이 작업을 수행해야하는 경우 허용 된 솔루션이 작동하지 않습니다.

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

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

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

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

3

웹 페이지에서 json을 prettify 할 수있는 멋진 라이브러리를 찾고 있다면 ...

Prism.js는 꽤 좋습니다.

http://prismjs.com/

JSON.stringify (obj, undefined, 2)를 사용하여 들여 쓰기를 얻은 다음 프리즘을 사용하여 테마를 추가하는 것이 좋은 접근 방식이었습니다.

ajax 호출을 통해 JSON으로로드하는 경우 Prism의 유틸리티 방법 중 하나를 실행하여 미리 확인할 수 있습니다

예를 들면 다음과 같습니다.

Prism.highlightAll()

1

이거 좋다:

https://github.com/mafintosh/json-markup 에서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>

스타일 시트 예제는 여기에서 찾을 수 있습니다.

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

1

콘솔의 구문 강조가 좋은 솔루션을 찾을 수 없으므로 여기에 2p가 있습니다.

cli-highlight 종속성 설치 및 추가

npm install cli-highlight --save

전 세계적으로 logjson 정의

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

사용하다

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

산출


0

HighlightJS 사용을 권장 합니다. 허용되는 답변 과 동일한 원칙 을 사용 하지만 다른 많은 언어 에서도 작동 하며 사전 정의 된 많은 색 구성표가 있습니다. RequireJS를 사용하는 경우 다음을 사용하여 호환 가능한 모듈을 생성 할 수 있습니다

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

세대는 Python3과 Java에 의존합니다. -n축소되지 않은 버전을 생성하려면 추가하십시오 .


0

기본 기능을 사용하지 않고 인쇄하는 방법은 다음과 같습니다.

function pretty(ob, lvl = 0) {

  let temp = [];

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

}

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

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

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

0

디버깅 목적으로 객체를 표시하는 가장 간단한 방법 :

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

DOM에 객체를 표시하려면 HTML로 해석되는 문자열을 포함 할 수 있다는 점을 고려해야합니다. 따라서 탈출 해야합니다 ...

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

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

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

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

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

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

0

HTML사용하여 강조 표시하고 아름답게하려면 Bootstrap:

function prettifyJson(json, prettify) {
    if (typeof json !== 'string') {
        if (prettify) {
            json = JSON.stringify(json, undefined, 4);
        } else {
            json = JSON.stringify(json);
        }
    }
    return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
        function(match) {
            let cls = "<span>";
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = "<span class='text-danger'>";
                } else {
                    cls = "<span>";
                }
            } else if (/true|false/.test(match)) {
                cls = "<span class='text-primary'>";
            } else if (/null/.test(match)) {
                cls = "<span class='text-info'>";
            }
            return cls + match + "</span>";
        }
    );
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.