在线JSON格式化工具：美观树形结构展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线JSON格式化工具</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
font-size: 24px;
font-weight: normal;
}
.container {
margin: 0 auto;
padding: 20px;
max-width: 800px;
}
textarea {
width: 100%;
height: 200px;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
margin-bottom: 20px;
resize: none;
}
.tree {
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid #ccc;
background-color: #fff;
}
.tree li {
padding: 10px;
position: relative;
cursor: pointer;
}
.tree li::before,
.tree li::after {
content: '';
position: absolute;
top: 0;
}
.tree li::before {
left: -20px;
border-left: 1px solid #ccc;
height: 100%;
}
.tree li::after {
left: -20px;
border-top: 1px solid #ccc;
width: 10px;
}
.tree li:last-child::before {
height: 10px;
}
.tree li.collapsed::after {
transform: rotate(-90deg);
top: 5px;
left: -15px;
width: 10px;
height: 10px;
border: none;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.tree li.collapsed > ul {
display: none;
}
.tree li.leaf::before {
height: 10px;
border-bottom: 1px solid #ccc;
}
.tree li.leaf::after {
display: none;
}
.tree li:hover {
background-color: #f2f2f2;
}
.tree li.selected {
background-color: #333;
color: #fff;
}
</style>
</head>
<body>
<header>
<h1>在线JSON格式化工具</h1>
</header>
<div class="container">
<textarea id="json-input"></textarea>
<ul id="tree"></ul>
</div>
<script>
const jsonInput = document.getElementById('json-input');
const tree = document.getElementById('tree');
<pre><code> // 格式化JSON
function formatJSON(json) {
try {
return JSON.stringify(JSON.parse(json), null, 2);
} catch (e) {
return '无效的JSON格式';
}
}
// 渲染树形结构
function renderTree(data) {
if (typeof data === 'object' && data !== null) {
const keys = Object.keys(data);
const list = document.createElement('ul');
keys.forEach(key => {
const item = document.createElement('li');
item.innerText = key;
item.classList.add(typeof data[key]);
if (typeof data[key] === 'object' && data[key] !== null) {
item.classList.add('collapsed');
item.addEventListener('click', () => {
item.classList.toggle('collapsed');
});
item.appendChild(renderTree(data[key]));
}
list.appendChild(item);
});
return list;
} else {
const item = document.createElement('li');
item.innerText = data;
item.classList.add(typeof data);
item.classList.add('leaf');
return item;
}
}
jsonInput.addEventListener('input', () => {
const jsonString = jsonInput.value.trim();
const formattedJSON = formatJSON(jsonString);
jsonInput.value = formattedJSON;
const jsonData = JSON.parse(formattedJSON);
tree.innerHTML = '';
tree.appendChild(renderTree(jsonData));
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/mNCe 著作权归作者所有。请勿转载和采集!