作为程序员,没有合适的工具,就得手搓一个,PC端,移动端均可适用。废话不多说,直接上代码。
HTML:
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:
javascript
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:
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格式化计算器