8
<!DOCTYPE html>
<html>
<head>
<title>JSON Viewer</title>
<style>
body { font-family: monospace; margin: 20px; background: #1e1e1e; color: #d4d4d4; }
textarea { width: 100%; height: 200px; background: #252526; color: #d4d4d4; border: 1px solid #3c3c3c; padding: 10px; }
button { margin: 10px 5px 10px 0; padding: 8px 16px; background: #0e639c; color: white; border: none; cursor: pointer; }
button:hover { background: #1177bb; }
#output { background: #252526; border: 1px solid #3c3c3c; padding: 15px; white-space: pre; overflow: auto; }
.key { color: #9cdcfe; }
.string { color: #ce9178; }
.number { color: #b5cea8; }
.boolean { color: #569cd6; }
.null { color: #569cd6; }
.collapsible { cursor: pointer; user-select: none; }
.collapsible::before { content: '▼ '; font-size: 10px; }
.collapsed::before { content: '▶ '; }
.hidden { display: none; }
.error { color: #f48771; }
</style>
</head>
<body>
<h2>JSON Viewer</h2>
<textarea id="input" placeholder="Paste JSON here..."></textarea><br>
<button onclick="formatJSON()">Format</button>
<button onclick="minifyJSON()">Minify</button>
<button onclick="clearAll()">Clear</button>
<div id="output"></div>
<script>
function formatJSON() {
const input = document.getElementById('input').value;
const output = document.getElementById('output');
try {
const obj = JSON.parse(input);
output.innerHTML = syntaxHighlight(JSON.stringify(obj, null, 2));
addCollapsible();
} catch (e) {
output.innerHTML = `<span class="error">Invalid JSON: ${e.message}</span>`;
}
}
function minifyJSON() {
const input = document.getElementById('input').value;
const output = document.getElementById('output');
try {
const obj = JSON.parse(input);
output.textContent = JSON.stringify(obj);
} catch (e) {
output.innerHTML = `<span class="error">Invalid JSON: ${e.message}</span>`;
}
}
function clearAll() {
document.getElementById('input').value = '';
document.getElementById('output').innerHTML = '';
}
function syntaxHighlight(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) {
let cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';