How can I pretty-print JSON using JavaScript?

manpreet Best Answer 2 years ago

_x000D_ Pretty-printing is implemented natively in JSON.stringify(). The third argument enables pretty printing and sets the spacing to use: var str = JSON.stringify(obj, null, 2); // spacing level = 2 If you need syntax highlighting, you might use some regex magic like so: function syntaxHighlight(json) { if (typeof json != 'string') { json = JSON.stringify(json, undefined, 2); } json = json.replace(/&/g, '&').replace(//g, '>'); 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 '' + match + ''; }); } See in action here: jsfiddle Or a full snippet provided below: _x000D_ _x000D_ function output(inp) {_x000D_ document.body.appendChild(document.createElement('pre')).innerHTML = inp;_x000D_ }_x000D_ _x000D_ function syntaxHighlight(json) {_x000D_ json = json.replace(/&/g, '&').replace(//g, '>');_x000D_ return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {_x000D_ var cls = 'number';_x000D_ if (/^"/.test(match)) {_x000D_ if (/:$/.test(match)) {_x000D_ cls = 'key';_x000D_ } else {_x000D_ cls = 'string';_x000D_ }_x000D_ } else if (/true|false/.test(match)) {_x000D_ cls = 'boolean';_x000D_ } else if (/null/.test(match)) {_x000D_ cls = 'null';_x000D_ }_x000D_ return '' + match + '';_x000D_ });_x000D_ }_x000D_ _x000D_ var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};_x000D_ var str = JSON.stringify(obj, undefined, 4);_x000D_ _x000D_ output(str);_x000D_ output(syntaxHighlight(str));_x000D_ pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }_x000D_ .string { color: green; }_x000D_ .number { color: darkorange; }_x000D_ .boolean { color: blue; }_x000D_ .null { color: magenta; }_x000D_ .key { color: red; }_x000D_ _x000D_