JSON 工具箱 (JSON Toolbox)
一个强大、美观且纯前端的 JSON 工具网页，提供了丰富的 JSON 处理功能，包括格式化、对比、排序和可交互的视图。
点击使用 json-tools.html
✨ 功能特性
本工具箱集成了两个核心功能，您可以通过顶部的 Tab 菜单进行切换：
1. JSON 格式化 (JSON Formatter)
帮助您将杂乱的 JSON 数据变得清晰、易读。
- 智能输入: 支持直接粘贴 JSON 字符串或上传
.json/.txt文件。 - 语法高亮: 对格式化后的 JSON 提供类似 IDE 的语法高亮，包括键、字符串、数字、布尔值和 null，阅读更舒适。
- 可折叠视图: 输出结果中的所有对象
{...}和数组[...]都可以自由折叠和展开，轻松驾驭超大、超深的 JSON 结构。 - 紧凑布局: 采用
key: {的紧凑风格，节省垂直空间。 - 一键排序: 可对 JSON 对象的所有键进行递归的字母序（A-Z）排序。
- URL 解码: 在格式化前，可选择对输入的字符串进行 URL 解码，方便处理来自 URL 参数的 JSON 数据。
- 一键复制: 轻松将格式化并美化后的 JSON 字符串复制到剪贴板。
- 交互式面板: 左侧输入面板可以收起，为输出结果提供更大的浏览空间。
2. JSON 对比 (JSON Comparer)
一个功能强大的可视化工具，用于找出两个 JSON 对象之间的差异。
- 双向输入: 左右两侧均支持粘贴或上传文件。
- 深度差异分析: 递归地对比两个 JSON 对象，包括嵌套的对象和数组。
- 合并视图: 将两个 JSON 数据合并在一个视图中，差异一目了然：
- 🟢 绿色: 两侧都存在且值相同的字段。
- 🔴 红色: 两侧都存在但值不同的字段。
+(绿色背景): 仅存在于右侧 JSON 中的字段。−(红色背景): 仅存在于左侧 JSON 中的字段。
- 可配置排序: 可选择在对比前是否对两侧的 JSON 对象的键进行排序。对于不关心键顺序的 API 响应对比，此功能极为有用。
- 可折叠视图: 对比结果同样支持对象和数组的折叠，让您能聚焦于关心的部分。
- 差异筛选: 可以选择“显示全部”或“只看差异”，快速过滤掉相同的内容。
- 长字段省略: 过长的字段值会自动用
...省略，鼠标悬浮即可查看完整内容。 - 自动收起: 点击“开始对比”后，上方的输入框会自动收起，让您专注于对比结果。
🚀 如何使用
这是一个纯静态的网页应用，无需任何后端或复杂的构建过程。
- 下载文件: 将本项目中的
json-tools.html(或您保存的文件名) 下载到您的本地电脑。 - 浏览器打开: 直接用您喜欢的现代浏览器（如 Chrome, Firefox, Edge, Safari）打开这个
.html文件。 - 开始使用:
- 在 JSON 格式化 标签页中，粘贴或上传您的 JSON 数据，然后点击“格式化”按钮。
- 在 JSON 对比 标签页中，分别在左右两侧输入您的 JSON 数据，然后点击“开始对比”按钮。
🛠️ 技术栈
本项目完全使用前端三剑客构建，无任何外部依赖：
- HTML5: 构建页面的语义化结构。
- CSS3:
- 使用 Flexbox 进行现代、响应式的布局。
- 变量 (
var()) 用于实现可维护的主题（颜色、字体等）。 - 伪元素和过渡效果用于增强 UI 交互。
- 原生 JavaScript (ES6+):
- 实现所有核心逻辑，包括文件读取、JSON 解析/序列化、深度递归对比、排序算法。
- 通过动态创建和操作 DOM 节点来生成可交互的视图，而非简单的字符串拼接，保证了高性能和高可维护性。