Advertisement
dwhitzzz

print JSON on JavaScript

Mar 23rd, 2016
154
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function output(inp) {
  2.     document.body.appendChild(document.createElement('pre')).innerHTML = inp;
  3. }
  4.  
  5. function syntaxHighlight(json) {
  6.     json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  7.     return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
  8.         var cls = 'number';
  9.         if (/^"/.test(match)) {
  10.             if (/:$/.test(match)) {
  11.                 cls = 'key';
  12.             } else {
  13.                 cls = 'string';
  14.             }
  15.         } else if (/true|false/.test(match)) {
  16.             cls = 'boolean';
  17.         } else if (/null/.test(match)) {
  18.             cls = 'null';
  19.         }
  20.         return '<span class="' + cls + '">' + match + '</span>';
  21.     });
  22. }
  23.  
  24. var obj = {a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]};
  25. var str = JSON.stringify(obj, undefined, 4);
  26.  
  27. output(str);
  28. output(syntaxHighlight(str));
  29.  
  30. -------------------------------- css --------------------------------
  31. pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
  32. .string { color: green; }
  33. .number { color: darkorange; }
  34. .boolean { color: blue; }
  35. .null { color: magenta; }
  36. .key { color: red; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement