在线 JSON 格式化工具 - 可视化树形结构展示 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>在线 JSON 格式化工具</title>
	<style>
		ul {
			list-style: none;
			padding-left: 20px;
		}
		li {
			cursor: pointer;
		}
		li:hover {
			background-color: #f2f2f2;
		}
		.property {
			font-weight: bold;
		}
		.collapsed {
			display: none;
		}
	</style>
</head>
<body>
	<h1>在线 JSON 格式化工具</h1>
	<label for="json-input">输入 JSON:</label>
	<input type="text" id="json-input">
	<button onclick="formatJson()">格式化</button>
	<div id="json-tree"></div>
<pre><code>&lt;script&gt;
	function formatJson() {
		const jsonInput = document.getElementById(&quot;json-input&quot;).value;
		const jsonObj = JSON.parse(jsonInput);
		const jsonTree = document.getElementById(&quot;json-tree&quot;);
		jsonTree.innerHTML = &quot;&quot;;
		jsonTree.appendChild(renderJson(jsonObj));
	}

	function renderJson(obj) {
		const ul = document.createElement(&quot;ul&quot;);
		for (let key in obj) {
			const li = document.createElement(&quot;li&quot;);
			li.innerHTML = `&lt;span class='property'&gt;${key}: &lt;/span&gt;`;
			const value = obj[key];
			if (typeof value === &quot;object&quot;) {
				li.classList.add(&quot;collapsed&quot;);
				li.onclick = function() {
					this.classList.toggle(&quot;collapsed&quot;);
				};
				li.appendChild(renderJson(value));
			} else {
				li.innerHTML += value;
			}
			ul.appendChild(li);
		}
		return ul;
	}
&lt;/script&gt;
</code></pre>
</body>
</html>