Created
June 16, 2023 06:31
-
-
Save ShahinSorkh/c5c5d9347d6f8c4d8f9680ddb1eaca71 to your computer and use it in GitHub Desktop.
A simple json beautifier with simple query mechanism
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
| #!/bin/bash | |
| set -euo pipefail | |
| PORT=${1:-8000} | |
| HTML='<!doctype html> | |
| <html> | |
| <head> | |
| <title>hey!</title> | |
| <style> | |
| * { box-sizing: border-box; } | |
| html, body { width: 100%; margin: 0; padding: 5px; } | |
| #output { padding: 5px; word-break: break-all; width: 100%; white-space: pre-wrap; } | |
| #errBox { padding: 5px; color: #f55; border: 1px solid red; width: 100%; } | |
| textarea { display: block; width: 90%; margin: auto; } | |
| .json-string { color: green; } | |
| .json-number { color: darkorange; } | |
| .json-boolean { color: blue; } | |
| .json-null { color: magenta; } | |
| .json-key { color: red; } | |
| </style> | |
| <script defer async src="https://unpkg.com/[email protected]"></script> | |
| </head> | |
| <body> | |
| <textarea id="input" onblur="updateOutput()"></textarea> | |
| <textarea id="eval" onblur="updateOutput()"></textarea> | |
| <span id="len"></span> | |
| <div><pre id="output"></pre></div> | |
| <script> | |
| const evalText = document.querySelector("#eval") | |
| const input = document.querySelector("#input") | |
| const output = document.querySelector("#output") | |
| const lenBox = document.querySelector("#len") | |
| const wrapInClass = (match, cls) => `<span class="json-${cls}">${match}</span>` | |
| const syntaxHighlight = (json) => json | |
| .replace(/&/g, "&") | |
| .replace(/</g, "<") | |
| .replace(/>/g, ">") | |
| .replace( | |
| /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, | |
| (match) => wrapInClass(match, /^"/.test(match) | |
| ? (/:$/.test(match) ? "key" : "string") | |
| : /true|false/.test(match) | |
| ? "boolean" | |
| : /null/.test(match) | |
| ? "null" | |
| : "number") | |
| ) | |
| const updateOutput = () => { | |
| try { | |
| const val = input.value.trim() | |
| if (val === "") return; | |
| const script = evalText.value.trim() | |
| const data = JSON.parse(val) | |
| const result = JSON.stringify(script ? eval(script) : data, null, " ") | |
| output.innerHTML = result.length > 100000 ? result : syntaxHighlight(result) | |
| lenBox.innerHTML = result.length + " chars" | |
| } catch (e) { | |
| output.innerHTML = `<div id="errBox">${e}</div>` | |
| lenBox.innerHTML = "" | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html>' | |
| DIR=$(mktemp -d) | |
| echo "www root on '$DIR'.." | |
| cd "$DIR" | |
| echo "$HTML" >index.html | |
| python3 -m http.server "$PORT" | |
| cd / | |
| rm -rf "$DIR" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment