Last active
August 29, 2015 14:17
-
-
Save pyhedgehog/9fad9063c7aae1c56eef to your computer and use it in GitHub Desktop.
JSON viewer// source http://jsbin.com/ligusi
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JSON viewer</title> | |
| <style id="jsbin-css"> | |
| .error { color:red; } | |
| pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } | |
| .string { color: green; } | |
| .number { color: darkorange; } | |
| .boolean { color: blue; } | |
| .null { color: magenta; } | |
| .key { color: red; } | |
| </style> | |
| </head> | |
| <body> | |
| <script id="jsbin-javascript"> | |
| (function(window) { | |
| // exit if the browser implements that event | |
| if ( "onhashchange" in window.document.body ) { return; } | |
| var location = window.location, | |
| oldURL = location.href, | |
| oldHash = location.hash; | |
| // check the location hash on a 100ms interval | |
| setInterval(function() { | |
| var newURL = location.href, | |
| newHash = location.hash; | |
| // if the hash has changed and a handler has been bound... | |
| if ( newHash != oldHash && typeof window.onhashchange === "function" ) { | |
| // execute the handler | |
| window.onhashchange({ | |
| type: "hashchange", | |
| oldURL: oldURL, | |
| newURL: newURL | |
| }); | |
| oldURL = newURL; | |
| oldHash = newHash; | |
| } | |
| }, 100); | |
| })(window); | |
| function jsonSyntaxHighlight(json) { | |
| json = json.replace(/&/g, '&').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 '<span class="' + cls + '">' + match + '</span>'; | |
| }); | |
| } | |
| var str,obj,err; | |
| function parse_arg_str(arg) { | |
| err = undefined; | |
| obj = undefined; | |
| try { | |
| if(arg.startsWith('#')) { | |
| arg = decodeURIComponent(escape(window.atob(arg.substr(1)))); | |
| } | |
| if(arg.startsWith('[')||arg.startsWith('{')) { | |
| str = arg; | |
| obj = JSON.parse(str); | |
| return true; | |
| } | |
| err = 'Unknown string start: '+arg.substr(0,20); | |
| return false; | |
| } catch(e) { | |
| err = e; | |
| } | |
| } | |
| function show_str(orig) { | |
| if(typeof obj == "undefined") { | |
| document.body.insertAdjacentHTML('beforeend','<p>'+orig+' = '+str+'</p>'); | |
| } else { | |
| var pre=jsonSyntaxHighlight(JSON.stringify(obj, undefined, 4)); | |
| document.body.insertAdjacentHTML('beforeend','<p>'+orig+':<pre>\n'+pre+'</pre></p>'); | |
| } | |
| } | |
| function show_err() { | |
| if(typeof err == "undefined") return; | |
| document.body.insertAdjacentHTML('beforeend','<p class="error">'+err+'</p>'); | |
| } | |
| function parse_search() { | |
| if(document.location.search) { | |
| if(parse_arg_str(decodeURIComponent(document.location.search.substr(1)))) | |
| show_str('search'); | |
| show_err(); | |
| } | |
| } | |
| function parse_hash() { | |
| if(document.location.hash) { | |
| if(parse_arg_str(document.location.hash.substr(1))) | |
| show_str('hash'); | |
| show_err(); | |
| } | |
| } | |
| function on_hash_change() { | |
| if(document.location.hash) { | |
| parse_hash(); | |
| } else { | |
| parse_search(); | |
| } | |
| } | |
| //document.body.insertAdjacentHTML('beforeend','<p>pathname = '+document.location.pathname+'</p>'); | |
| parse_search(); | |
| parse_hash(); | |
| window.onhashchange = on_hash_change; | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">.error { color:red; } | |
| pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } | |
| .string { color: green; } | |
| .number { color: darkorange; } | |
| .boolean { color: blue; } | |
| .null { color: magenta; } | |
| .key { color: red; } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">(function(window) { | |
| // exit if the browser implements that event | |
| if ( "onhashchange" in window.document.body ) { return; } | |
| var location = window.location, | |
| oldURL = location.href, | |
| oldHash = location.hash; | |
| // check the location hash on a 100ms interval | |
| setInterval(function() { | |
| var newURL = location.href, | |
| newHash = location.hash; | |
| // if the hash has changed and a handler has been bound... | |
| if ( newHash != oldHash && typeof window.onhashchange === "function" ) { | |
| // execute the handler | |
| window.onhashchange({ | |
| type: "hashchange", | |
| oldURL: oldURL, | |
| newURL: newURL | |
| }); | |
| oldURL = newURL; | |
| oldHash = newHash; | |
| } | |
| }, 100); | |
| })(window); | |
| function jsonSyntaxHighlight(json) { | |
| json = json.replace(/&/g, '&').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 '<span class="' + cls + '">' + match + '</span>'; | |
| }); | |
| } | |
| var str,obj,err; | |
| function parse_arg_str(arg) { | |
| err = undefined; | |
| obj = undefined; | |
| try { | |
| if(arg.startsWith('#')) { | |
| arg = decodeURIComponent(escape(window.atob(arg.substr(1)))); | |
| } | |
| if(arg.startsWith('[')||arg.startsWith('{')) { | |
| str = arg; | |
| obj = JSON.parse(str); | |
| return true; | |
| } | |
| err = 'Unknown string start: '+arg.substr(0,20); | |
| return false; | |
| } catch(e) { | |
| err = e; | |
| } | |
| } | |
| function show_str(orig) { | |
| if(typeof obj == "undefined") { | |
| document.body.insertAdjacentHTML('beforeend','<p>'+orig+' = '+str+'</p>'); | |
| } else { | |
| var pre=jsonSyntaxHighlight(JSON.stringify(obj, undefined, 4)); | |
| document.body.insertAdjacentHTML('beforeend','<p>'+orig+':<pre>\n'+pre+'</pre></p>'); | |
| } | |
| } | |
| function show_err() { | |
| if(typeof err == "undefined") return; | |
| document.body.insertAdjacentHTML('beforeend','<p class="error">'+err+'</p>'); | |
| } | |
| function parse_search() { | |
| if(document.location.search) { | |
| if(parse_arg_str(decodeURIComponent(document.location.search.substr(1)))) | |
| show_str('search'); | |
| show_err(); | |
| } | |
| } | |
| function parse_hash() { | |
| if(document.location.hash) { | |
| if(parse_arg_str(document.location.hash.substr(1))) | |
| show_str('hash'); | |
| show_err(); | |
| } | |
| } | |
| function on_hash_change() { | |
| if(document.location.hash) { | |
| parse_hash(); | |
| } else { | |
| parse_search(); | |
| } | |
| } | |
| //document.body.insertAdjacentHTML('beforeend','<p>pathname = '+document.location.pathname+'</p>'); | |
| parse_search(); | |
| parse_hash(); | |
| window.onhashchange = on_hash_change;</script></body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment