JSON 格式化工具 - 在线美化 JSON 数据 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>JSON 格式化工具</title>
	<meta charset="UTF-8">
	<style type="text/css">
		body {
			font-family: Arial, sans-serif;
			font-size: 14px;
			margin: 20px;
			padding: 0;
		}
		h1 {
			font-size: 24px;
			margin: 0 0 20px;
			padding: 0;
		}
		label {
			display: block;
			margin-bottom: 5px;
		}
		input[type="submit"] {
			margin-top: 10px;
			padding: 5px 10px;
			font-size: 14px;
			background-color: #0074D9;
			color: #fff;
			border: none;
			border-radius: 3px;
			cursor: pointer;
		}
		#result {
			margin-top: 20px;
			padding: 10px;
			border: 1px solid #ccc;
			background-color: #f1f1f1;
			overflow: auto;
		}
		.tree {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.tree li {
			margin: 0;
			padding: 0 0 0 20px;
			line-height: 20px;
			color: #333;
			position: relative;
		}
		.tree li:before {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 0;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-left: 10px solid #ccc;
			margin-top: 5px;
		}
		.tree li:last-child:before {
			height: 12px;
			margin-top: -1px;
		}
		.tree li:last-child:after {
			display: none;
		}
		.tree li:after {
			content: "";
			display: block;
			position: absolute;
			top: 0;
			left: -10px;
			width: 1px;
			height: 100%;
			border-left: 1px solid #ccc;
		}
		.tree li.collapsed:before {
			border-left: 10px solid #aaa;
		}
		.tree li.collapsed > ul {
			display: none;
		}
		.tree li.collapsed:after {
			display: none;
		}
		.tree li span {
			display: inline-block;
			padding: 2px 5px;
			border-radius: 3px;
			cursor: pointer;
			background-color: #eee;
		}
		.tree li span:hover {
			background-color: #ddd;
		}
		.tree li span.object {
			background-color: #0074D9;
			color: #fff;
		}
		.tree li span.array {
			background-color: #2ECC40;
			color: #fff;
		}
	</style>
</head>
<body>
	<h1>JSON 格式化工具</h1>
	<form>
		<label for="json">输入 JSON：</label>
		<textarea id="json" name="json" rows="10" cols="80"></textarea>
		<input type="submit" value="格式化">
	</form>
	<div id="result"></div>
	<script type="text/javascript">
		var resultDiv = document.getElementById("result");
		var jsonTextarea = document.getElementById("json");
		var json = null;
<pre><code>	function renderTree(data, parent) {
		var ul = document.createElement(&quot;ul&quot;);
		ul.className = &quot;tree&quot;;
		parent.appendChild(ul);
		for (var key in data) {
			var li = document.createElement(&quot;li&quot;);
			ul.appendChild(li);
			var value = data[key];
			var span = document.createElement(&quot;span&quot;);
			span.innerHTML = key;
			if (typeof value === 'object' &amp;&amp; value !== null) {
				if (Array.isArray(value)) {
					span.className = &quot;array&quot;;
					span.setAttribute('data-collapsed', 'false');
					span.addEventListener(&quot;click&quot;, function() {
							var collapsed = this.getAttribute('data-collapsed');
							if (collapsed === 'true') {
								this.setAttribute('data-collapsed', 'false');
								this.parentNode.classList.remove('collapsed');
							} else {
								this.setAttribute('data-collapsed', 'true');
								this.parentNode.classList.add('collapsed');
							}
					});
					li.appendChild(span);
					renderTree(value, li);
				} else {
					span.className = &quot;object&quot;;
					span.setAttribute('data-collapsed', 'false');
					span.addEventListener(&quot;click&quot;, function() {
							var collapsed = this.getAttribute('data-collapsed');
							if (collapsed === 'true') {
								this.setAttribute('data-collapsed', 'false');
								this.parentNode.classList.remove('collapsed');
							} else {
								this.setAttribute('data-collapsed', 'true');
								this.parentNode.classList.add('collapsed');
							}
					});
					li.appendChild(span);
					renderTree(value, li);
				}
			} else {
				span.innerHTML += ': ' + value;
				li.appendChild(span);
			}
		}
	}

	function formatJSON() {
		try {
			json = JSON.parse(jsonTextarea.value);
			resultDiv.innerHTML = &quot;&quot;;
			renderTree(json, resultDiv);
		} catch (e) {
			alert('输入的 JSON 格式不正确！');
		}
	}
	
	document.forms[0].addEventListener(&quot;submit&quot;, function(e) {
			e.preventDefault();
			formatJSON();
		});
&lt;/script&gt;
</code></pre>
</body>
</html>