作为程序员,没有合适的工具,就得手搓一个,PC端,移动端均可适用。废话不多说,直接上代码。
HTML:
<div class="calculator"><label for="jsonInput">输入 JSON 字符串:</label> <textarea id="jsonInput" rows="10" placeholder="请输入 JSON 字符串"></textarea><button onclick="formatJSON()">格式化</button><div class="result"><div>格式化结果:</div><pre id="jsonOutput" style="color: black; text-align: left;">结果将显示在此处</pre></div></div>
JS:
function formatJSON() {const jsonInput = document.getElementById('jsonInput').value.trim();if (jsonInput === '') {alert('请输入 JSON 字符串');return;}try {const jsonObject = JSON.parse(jsonInput);const formattedJSON = JSON.stringify(jsonObject, null, 4);document.getElementById('jsonOutput').textContent = formattedJSON;} catch (e) {alert('无效的 JSON 字符串,请检查输入内容');document.getElementById('jsonOutput').textContent = '无效的 JSON 字符串';}
}
CSS:
.calculator {width: 100%;background-color: #333;color: white;padding: 20px;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}textarea {width: 100%;margin-bottom: 10px;}label {display: block;margin-bottom: 10px;font-size: 16px;
}input, select {width: 100%!important;padding: 10px!important;margin-bottom: 20px;color: #000000; border-radius: 5px;border: 1px solid #555;font-size: 16px!important;background-color: #ffffff!important;
}button {width: 100%;padding: 10px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;font-size: 16px;
}button:hover {background-color: orange;
}.result {margin-top: 20px;text-align: center;
}option {background-color: #ffffff;
}p {font-size: 18px;margin-top: 5px!important;
}
线上运行,可以直接打开:JSON格式化计算器