JSON 格式�?- 小睿 AI 工具�?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; } .container { max-width: 900px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #f0f0f0; } .tool-name { font-size: 24px; font-weight: bold; color: #333; } .back-link { color: #667eea; text-decoration: none; } .toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .tool-btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; } .tool-btn.primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; } .tool-btn.success { background: #52c41a; color: #fff; } .tool-btn.warning { background: #faad14; color: #fff; } .tool-btn.danger { background: #ff4d4f; color: #fff; } .editor-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .editor-box { display: flex; flex-direction: column; } .editor-box label { font-weight: 500; margin-bottom: 8px; } .editor-box textarea { flex: 1; min-height: 400px; padding: 15px; border: 2px solid #e0e0e0; border-radius: 10px; font-family: 'Courier New', monospace; font-size: 13px; resize: vertical; } .editor-box textarea:focus { outline: none; border-color: #667eea; } .editor-box textarea.error { border-color: #ff4d4f; background: #fff5f5; } .editor-box textarea.valid { border-color: #52c41a; background: #f6ffed; } .status-bar { margin-top: 10px; padding: 10px; border-radius: 6px; font-size: 14px; } .status-bar.error { background: #fff5f5; color: #ff4d4f; } .status-bar.success { background: #f6ffed; color: #52c41a; } .status-bar.info { background: #f0f0ff; color: #667eea; } @media (max-width: 768px) { .editor-container { grid-template-columns: 1fr; } } </style> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "SoftwareApplication", "name": "JSON 格式化", "description": "JSON 格式化、验证、压缩", "url": "https://xrdj.club/tool.php?id=35", "applicationCategory": "UtilitiesApplication", "operatingSystem": "All", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "CNY" }, "author": { "@type": "Organization", "name": "小睿 AI 工具箱", "url": "https://xrdj.club" } } </script> </head> <body> <div class="container"> <div class="header"> <div class="tool-name">📄 JSON 格式�?/div> <a href="/" class="back-link">�?返回首页</a> </div> <div class="toolbar"> <button class="tool-btn primary" onclick="formatJSON()">�?格式�?/button> <button class="tool-btn success" onclick="minifyJSON()">🗜�?压缩</button> <button class="tool-btn warning" onclick="validateJSON()">�?验证</button> <button class="tool-btn danger" onclick="clearAll()">🗑�?清空</button> <button class="tool-btn" style="background:#1890ff;color:#fff" onclick="copyResult()">📋 复制结果</button> </div> <div class="editor-container"> <div class="editor-box"> <label>输入 JSON</label> <textarea id="inputJson" placeholder='粘贴 JSON 内容，例如：{"name": "test", "value": 123}'></textarea> <div class="status-bar info" id="inputStatus">等待输入...</div> </div> <div class="editor-box"> <label>格式化结�?/label> <textarea id="outputJson" readonly placeholder="结果将显示在这里..."></textarea> <div class="status-bar info" id="outputStatus">准备就绪</div> </div> </div> </div> <script> function formatJSON() { const input = document.getElementById('inputJson').value.trim(); if (!input) { showStatus('inputStatus', '请输�?JSON 内容', 'info'); return; } try { const parsed = JSON.parse(input); const formatted = JSON.stringify(parsed, null, 4); document.getElementById('outputJson').value = formatted; document.getElementById('inputJson').classList.remove('error'); document.getElementById('inputJson').classList.add('valid'); showStatus('inputStatus', '�?JSON 格式正确', 'success'); showStatus('outputStatus', `格式化成功！�?${countLines(formatted)} 行`, 'success'); } catch (e) { showStatus('inputStatus', '�?格式错误�? + e.message, 'error'); document.getElementById('inputJson').classList.add('error'); document.getElementById('outputJson').value = ''; } } function minifyJSON() { const input = document.getElementById('inputJson').value.trim(); if (!input) return; try { const parsed = JSON.parse(input); document.getElementById('outputJson').value = JSON.stringify(parsed); showStatus('outputStatus', '压缩成功�?, 'success'); } catch (e) { showStatus('outputStatus', '无效 JSON�? + e.message, 'error'); } } function validateJSON() { const input = document.getElementById('inputJson').value.trim(); if (!input) { showStatus('inputStatus', '请输�?JSON 内容', 'info'); return; } try { JSON.parse(input); showStatus('inputStatus', '�?JSON 格式验证通过�?, 'success'); document.getElementById('inputJson').classList.add('valid'); } catch (e) { showStatus('inputStatus', '�?验证失败�? + e.message, 'error'); document.getElementById('inputJson').classList.add('error'); } } function copyResult() { const output = document.getElementById('outputJson'); if (output.value) { output.select(); document.execCommand('copy'); alert('已复制到剪贴板！'); } } function clearAll() { document.getElementById('inputJson').value = ''; document.getElementById('outputJson').value = ''; document.getElementById('inputJson').classList.remove('valid', 'error'); showStatus('inputStatus', '等待输入...', 'info'); showStatus('outputStatus', '准备就绪', 'info'); } function showStatus(id, message, type) { const el = document.getElementById(id); el.textContent = message; el.className = 'status-bar ' + type; } function countLines(text) { return text.split('\n').length; } </script> </body> </html>