JSON修复HTML工具

92 阅读1分钟

有时候json放了一些不可见的字符或者数组格式有问题,可以尝试用这个修复。尤其是后端返回的那种,太多数据难得看,json又报错无法格式化。魔鬼~

<!DOCTYPE html>
<html>
<head>
    <title>JSON 修复工具</title>
    <style>
        body { margin: 20px; font-family: Arial, sans-serif; }
        textarea { width: 100%; height: 300px; margin: 10px 0; }
        button { padding: 10px; margin: 5px; }
        #result { padding: 10px; margin-top: 10px; }
    </style>
</head>
<body>
    <h2>JSON 修复工具</h2>
    <textarea id="jsonInput" placeholder="粘贴您的 JSON 数据"></textarea>
    <div>
        <button onclick="fixJSON()">修复 JSON</button>
        <button onclick="validateJSON()">验证 JSON</button>
    </div>
    <div id="result"></div>

    <script>
        function fixJSON() {
            let input = document.getElementById('jsonInput').value;
            try {
                // 移除可能的BOM和其他不可见字符
                input = input.replace(/^\uFEFF/, '');
                // 确保数据是数组格式
                if (!input.trim().startsWith('[')) {
                    input = '[' + input + ']';
                }
                // 格式化
                const parsed = JSON.parse(input);
                document.getElementById('jsonInput').value = JSON.stringify(parsed, null, 2);
                document.getElementById('result').innerHTML = '✓ JSON 已修复并格式化';
                document.getElementById('result').style.color = 'green';
            } catch (e) {
                document.getElementById('result').innerHTML = '✗ 错误: ' + e.message;
                document.getElementById('result').style.color = 'red';
            }
        }

        function validateJSON() {
            const input = document.getElementById('jsonInput').value;
            try {
                JSON.parse(input);
                document.getElementById('result').innerHTML = '✓ 有效的 JSON';
                document.getElementById('result').style.color = 'green';
            } catch (e) {
                document.getElementById('result').innerHTML = '✗ 无效的 JSON: ' + e.message;
                document.getElementById('result').style.color = 'red';
            }
        }
    </script>
</body>
</html>

保存运行