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

질문자 :Mark

읽기 쉬운(사람 독자용) 형식으로 JSON을 표시하려면 어떻게 해야 합니까? 나는 주로 색상/글꼴 스타일/등과 함께 들여쓰기와 공백을 찾고 있습니다.

예쁜 인쇄는 기본적으로 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

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

 function output(inp) { document.body.appendChild(document.createElement('pre')).innerHTML = inp; } function syntaxHighlight(json) { 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>'; }); } var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]}; var str = JSON.stringify(obj, undefined, 4); output(str); output(syntaxHighlight(str));

 pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } .string { color: green; } .number { color: darkorange; } .boolean { color: blue; } .null { color: magenta; } .key { color: red; }

user123444555621

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

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

이것은 문자열에서 JSON 개체를 빌드한 다음 JSON stringify의 예쁜 인쇄를 사용하여 문자열로 다시 변환합니다.

Rick Hanlon II

더 좋은 방법.

자바스크립트에서 JSON 배열 예쁘게 하기

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

Charmie

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>"

예시:

 var jsonObj = {"streetLabel": "Avenue Anatole France", "city": "Paris 07", "postalCode": "75007", "countryCode": "FRA", "countryLabel": "France" }; document.getElementById("result-before").innerHTML = JSON.stringify(jsonObj); document.getElementById("result-after").innerHTML = "<pre>"+JSON.stringify(jsonObj,undefined, 2) +"</pre>"

 div { float:left; clear:both; margin: 1em 0; }

 <div id="result-before"></div> <div id="result-after"></div>

Adel MANI

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이 콘솔에서 % 이스케이프를 지원하지 않는다는 것을 알았습니다. 이상합니다... 아마도 이것은 미래에 작동할 것입니다.

건배!

Milen Boev

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

편집: jsonreport.js

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

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

mythz

console.log(util.inspect()) 의 바로 가기인 console.dir() 사용할 수 있습니다. (유일한 차이점은 객체에 정의된 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})}))"

adius

다음은 터미널에 맞게 조정된 user123444555621의 멋진 HTML입니다. Node 스크립트 디버깅에 편리합니다.

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

용법:

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

James Heazlewood

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

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

• https://getfirebug.com/wiki/index.php/Console_API
• https://developer.mozilla.org/en-US/docs/DOM/console

gavenkoa

Ruby를 위한 다른 예쁜 프린터에 만족하지 못해서 , 나는 내 자신( NeatJSON )을 작성한 다음 무료 온라인 포맷터를 포함한 JavaScript로 포팅했습니다 . 코드는 MIT 라이선스에 따라 무료입니다(매우 관대함).

기능(모두 선택 사항):

• 줄 너비를 설정하고 개체와 배열이 맞을 때 같은 줄에 유지하는 방식으로 줄 바꿈하고 그렇지 않은 경우 줄당 하나의 값을 줄 바꿈합니다.
• 원하는 경우 개체 키를 정렬합니다.
• 개체 키를 정렬합니다(콜론 정렬).
• 정수를 엉망으로 만들지 않고 부동 소수점 숫자를 특정 소수 자릿수로 포맷합니다.
• '짧은' 줄 바꿈 모드는 여는 대괄호/중괄호를 값과 같은 줄에 배치하여 일부 사용자가 선호하는 형식을 제공합니다.
• 대괄호 사이, 콜론과 쉼표 앞/뒤, 배열 및 개체의 간격을 세밀하게 제어합니다.
• 기능은 웹 브라우저와 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);

Phrogz

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

webfan

잘 작동한다:

 console.table()

여기에서 더 많은 것을 읽으십시오: https://developer.mozilla.org/pt-BR/docs/Web/API/Console/table

user5044606

다음은 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

도움이 되기를 바랍니다!

benshope

JavaScript 라이브러리의 Douglas Crockford의 JSON은 stringify 메서드를 통해 JSON을 꽤 인쇄합니다.

이 오래된 질문에 대한 답변이 유용 할 수도 있습니다. (유닉스) 셸 스크립트에서 JSON을 어떻게 예쁘게 인쇄할 수 있습니까?

zcopley

오늘 @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의 컨텍스트에 있는 코드

Just Jake

콘솔에 대한 좋은 구문 강조 표시가 있는 솔루션을 찾을 수 없으므로 여기에 내 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"]});

snovelli

텍스트 영역에서 작동하기 위해 이것이 필요한 경우 허용되는 솔루션이 작동하지 않습니다.

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

Kellen Stuart

웹 페이지에서 json을 예쁘게 꾸밀 수 있는 멋진 라이브러리를 찾고 있다면...

Prism.js는 꽤 좋습니다.

http://prismjs.com/

나는 들여쓰기를 얻기 위해 JSON.stringify(obj, undefined, 2)를 사용하고 테마를 추가하기 위해 프리즘을 사용하는 것이 좋은 접근 방식이라는 것을 발견했습니다.

Ajax 호출을 통해 JSON으로 로드하는 경우 Prism의 유틸리티 메서드 중 하나를 실행하여

예를 들어:

 Prism.highlightAll()

chim

JSON.stringify(your object, null, 2) 사용할 수 있습니다. 두 번째 매개변수는 key와 Val을 매개변수로 사용하는 대체 함수로 사용할 수 있습니다. JSON 객체 내에서 무언가를 수정하려는 경우에 사용할 수 있습니다.

추가 참조: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

jenil christo

이거 좋다:

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

 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

wires

Bootstrap 사용하여 HTML 에서 강조 표시하고 아름답게 하려면 다음을 수행하십시오.

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

Mahdyfo

여기에서 jsonAnalyze 메소드를 보여주고 싶습니다 . JSON 구조의 예쁜 인쇄만 수행 하지만 경우에 따라 전체 JSON을 인쇄하는 것보다 더 유용할 수 있습니다.

다음과 같은 복잡한 JSON이 있다고 가정해 보겠습니다.

 let theJson = { 'username': 'elen', 'email': 'elen@test.com', 'state': 'married', 'profiles': [ {'name': 'elenLove', 'job': 'actor' }, {'name': 'elenDoe', 'job': 'spy'} ], 'hobbies': ['run', 'movies'], 'status': { 'home': { 'ownsHome': true, 'addresses': [ {'town': 'Mexico', 'address': '123 mexicoStr'}, {'town': 'Atlanta', 'address': '4B atlanta 45-48'}, ] }, 'car': { 'ownsCar': true, 'cars': [ {'brand': 'Nissan', 'plate': 'TOKY-114', 'prevOwnersIDs': ['4532354531', '3454655344', '5566753422']}, {'brand': 'Benz', 'plate': 'ELEN-1225', 'prevOwnersIDs': ['4531124531', '97864655344', '887666753422']} ] } }, 'active': true, 'employed': false, };

그러면 메서드는 다음과 같은 구조를 반환합니다.

 username email state profiles[] profiles[].name profiles[].job hobbies[] status{} status{}.home{} status{}.home{}.ownsHome status{}.home{}.addresses[] status{}.home{}.addresses[].town status{}.home{}.addresses[].address status{}.car{} status{}.car{}.ownsCar status{}.car{}.cars[] status{}.car{}.cars[].brand status{}.car{}.cars[].plate status{}.car{}.cars[].prevOwnersIDs[] active employed

이것이 jsonAnalyze() 코드입니다:

 function jsonAnalyze(obj) { let arr = []; analyzeJson(obj, null, arr); return logBeautifiedDotNotation(arr); function analyzeJson(obj, parentStr, outArr) { let opt; if (!outArr) { return "no output array given" } for (let prop in obj) { opt = parentStr ? parentStr + '.' + prop : prop; if (Array.isArray(obj[prop]) && obj[prop] !== null) { let arr = obj[prop]; if ((Array.isArray(arr[0]) || typeof arr[0] == "object") && arr[0] != null) { outArr.push(opt + '[]'); analyzeJson(arr[0], opt + '[]', outArr); } else { outArr.push(opt + '[]'); } } else if (typeof obj[prop] == "object" && obj[prop] !== null) { outArr.push(opt + '{}'); analyzeJson(obj[prop], opt + '{}', outArr); } else { if (obj.hasOwnProperty(prop) && typeof obj[prop] != 'function') { outArr.push(opt); } } } } function logBeautifiedDotNotation(arr) { retStr = ''; arr.map(function (item) { let dotsAmount = item.split(".").length - 1; let dotsString = Array(dotsAmount + 1).join(' '); retStr += dotsString + item + '\n'; console.log(dotsString + item) }); return retStr; } } jsonAnalyze(theJson);

JohnPan

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

 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 } } */

everlasto

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

 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

Brent Bradburn

<!-- 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>

Louie

@ user123444555621을 기반으로 하며 약간 더 현대적입니다.

 const clsMap = [ [/^".*:$/, "key"], [/^"/, "string"], [/true|false/, "boolean"], [/null/, "key"], [/.*/, "number"], ] const syntaxHighlight = obj => JSON.stringify(obj, null, 4) .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span class="${clsMap.find(([regex]) => regex.test(match))[1]}">${match}</span>`);

js 내부에 색상을 지정할 수도 있습니다(CSS 필요 없음)

 const clsMap = [ [/^".*:$/, "red"], [/^"/, "green"], [/true|false/, "blue"], [/null/, "magenta"], [/.*/, "darkorange"], ] const syntaxHighlight = obj => JSON.stringify(obj, null, 4) .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span style="color:${clsMap.find(([regex]) => regex.test(match))[1]}">${match}</span>`);

정규식이 적은 버전

 const clsMap = [ [match => match.startsWith('"') && match.endsWith(':'), "red"], [match => match.startsWith('"'), "green"], [match => match === "true" || match === "false" , "blue"], [match => match === "null", "magenta"], [() => true, "darkorange"], ]; const syntaxHighlight = obj => JSON.stringify(obj, null, 4) .replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => `<span style="color:${clsMap.find(([fn]) => fn(match))[1]}">${match}</span>`);

Teiem

출처 : http:www.stackoverflow.com/questions/4810841/pretty-print-json-using-javascript