Skip to content

Instantly share code, notes, and snippets.

@lyle

lyle/index.html

Last active December 15, 2015 09:49
Show Gist options
  • Save lyle/5241637 to your computer and use it in GitHub Desktop.
Save lyle/5241637 to your computer and use it in GitHub Desktop.
Download ZIP
Bookmarklet for Pretty Printing a JSON api return
Raw
index.html
<html><body>
Drag this link <a href="javascript:function%20output(inp)%20{document.head.appendChild(document.createElement(%27style%27)).innerHTML%20=%20%22.string%20{%20color:%20green;%20}%20.number%20{%20color:%20darkorange;%20}%20.boolean%20{%20color:%20blue;%20}%20.null%20{%20color:%20magenta;%20}%20.key%20{%20color:%20red;%20}%22;document.body.innerHTML%20=%20%22<pre>%22%20+%20inp%20+%20%22</pre>%22;};function%20syntaxHighlight(json)%20{json%20=%20json.replace(/&/g,%20%27&amp;%27).replace(/</g,%20%27&lt;%27).replace(/>/g,%20%27&gt;%27);return%20json.replace(/(%22(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\%22])*%22(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,%20function%20(match)%20{var%20cls%20=%20%27number%27;if%20(/^%22/.test(match))%20{if%20(/:$/.test(match))%20{cls%20=%20%27key%27;}%20else%20{cls%20=%20%27string%27;}}%20else%20if%20(/true|false/.test(match))%20{cls%20=%20%27boolean%27;}%20else%20if%20(/null/.test(match))%20{cls%20=%20%27null%27;}return%20%27<span%20class=%22%27%20+%20cls%20+%20%27%22>%27%20+%20match%20+%20%27</span>%27;});};function%20reformatJSON(jsonString){return%20JSON.stringify(JSON.parse(jsonString),%20undefined,%204);};output(syntaxHighlight(reformatJSON(document.body.innerText)));">ppJSON</a> to your bookmark's bar and then you can format those JSON API returns.
</body></html>
Raw
source.js
//the content of the bookmarklet is:
//javascript:function%20output(inp)%20{document.head.appendChild(document.createElement(%27style%27)).innerHTML%20=%20%22.string%20{%20color:%20green;%20}%20.number%20{%20color:%20darkorange;%20}%20.boolean%20{%20color:%20blue;%20}%20.null%20{%20color:%20magenta;%20}%20.key%20{%20color:%20red;%20}%22;document.body.innerHTML%20=%20%22<pre>%22%20+%20inp%20+%20%22</pre>%22;};function%20syntaxHighlight(json)%20{json%20=%20json.replace(/&/g,%20%27&amp;%27).replace(/</g,%20%27&lt;%27).replace(/>/g,%20%27&gt;%27);return%20json.replace(/(%22(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\%22])*%22(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,%20function%20(match)%20{var%20cls%20=%20%27number%27;if%20(/^%22/.test(match))%20{if%20(/:$/.test(match))%20{cls%20=%20%27key%27;}%20else%20{cls%20=%20%27string%27;}}%20else%20if%20(/true|false/.test(match))%20{cls%20=%20%27boolean%27;}%20else%20if%20(/null/.test(match))%20{cls%20=%20%27null%27;}return%20%27<span%20class=%22%27%20+%20cls%20+%20%27%22>%27%20+%20match%20+%20%27</span>%27;});};function%20reformatJSON(jsonString){return%20JSON.stringify(JSON.parse(jsonString),%20undefined,%204);};output(syntaxHighlight(reformatJSON(document.body.innerText)));
function output(inp) {
document.head.appendChild(document.createElement('style')).innerHTML = ".string { color: green; } .number { color: darkorange; } .boolean { color: blue; } .null { color: magenta; } .key { color: red; }";
document.body.innerHTML = "<pre>" + inp + "</pre>";
};
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>';
});
};
function reformatJSON(jsonString){
return JSON.stringify(JSON.parse(jsonString), undefined, 4);
};
output(syntaxHighlight(reformatJSON(document.body.innerText)));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment