0%

Json简单工具

JSON 工具箱 (JSON Toolbox)

一个强大、美观且纯前端的 JSON 工具网页,提供了丰富的 JSON 处理功能,包括格式化、对比、排序和可交互的视图。

点击使用 json-tools.html

img.png

✨ 功能特性

本工具箱集成了两个核心功能,您可以通过顶部的 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 响应对比,此功能极为有用。
  • 可折叠视图: 对比结果同样支持对象和数组的折叠,让您能聚焦于关心的部分。
  • 差异筛选: 可以选择“显示全部”或“只看差异”,快速过滤掉相同的内容。
  • 长字段省略: 过长的字段值会自动用 ... 省略,鼠标悬浮即可查看完整内容。
  • 自动收起: 点击“开始对比”后,上方的输入框会自动收起,让您专注于对比结果。

🚀 如何使用

这是一个纯静态的网页应用,无需任何后端或复杂的构建过程。

  1. 下载文件: 将本项目中的 json-tools.html (或您保存的文件名) 下载到您的本地电脑。
  2. 浏览器打开: 直接用您喜欢的现代浏览器(如 Chrome, Firefox, Edge, Safari)打开这个 .html 文件。
  3. 开始使用:
  • JSON 格式化 标签页中,粘贴或上传您的 JSON 数据,然后点击“格式化”按钮。
  • JSON 对比 标签页中,分别在左右两侧输入您的 JSON 数据,然后点击“开始对比”按钮。

🛠️ 技术栈

本项目完全使用前端三剑客构建,无任何外部依赖:

  • HTML5: 构建页面的语义化结构。
  • CSS3:
    • 使用 Flexbox 进行现代、响应式的布局。
    • 变量 (var()) 用于实现可维护的主题(颜色、字体等)。
    • 伪元素和过渡效果用于增强 UI 交互。
  • 原生 JavaScript (ES6+):
    • 实现所有核心逻辑,包括文件读取、JSON 解析/序列化、深度递归对比、排序算法。
    • 通过动态创建和操作 DOM 节点来生成可交互的视图,而非简单的字符串拼接,保证了高性能和高可维护性。