从零实现一个纯前端 JSON 格式化工具：思路与实现细节

JSON 是日常开发里接触最多的数据格式，但在很多在线工具里，粘贴一段 JSON 会直接上传到服务器。出于隐私和离线可用考虑，我写了一个纯前端的 JSON 格式化与校验工具，全部逻辑在浏览器本地执行，单文件即可运行。源码已开源：https://gitee.com/Catl07/json-format-tool

## 一、为什么用原生技术栈

这个工具只用 HTML + CSS + JavaScript，没有引入任何框架或第三方库。原因很简单：工具的核心逻辑只有解析、格式化和错误提示三件事，引入构建工具和依赖反而增加了使用门槛——用户下载后双击 index.html 就能用，不需要 npm install。

## 二、核心逻辑：解析与格式化

JSON 的解析和序列化，浏览器原生就提供了能力。核心只有两步：

- 用 JSON.parse 解析输入，语法错误会抛出异常，异常信息里带着位置提示
- 用 JSON.stringify 重新输出，第二个参数给 null，第三个参数控制缩进层级

格式化与压缩其实是同一个函数的两种输出：缩进传 2 是格式化，不传缩进就是压缩成单行。这样一份代码就能覆盖两种需求。

## 三、错误提示要友好

直接抛出原生异常信息对普通用户并不友好。我在 catch 分支里把错误信息包装成「解析失败：」加原始信息，并用红色样式区分，让用户一眼看出是语法问题而不是工具坏了。

## 四、界面尽量克制

整个界面只有三样东西：一个输入框、三个按钮（格式化、压缩、清空）、一个输出区。没有多余设置项，也没有嵌套菜单。输入框用等宽字体，输出区保留换行并允许长行自动折行，避免长 JSON 撑破布局。

## 五、可扩展的方向

后续如果继续打磨，可以加这些能力：JSON 与 YAML 互转、按路径搜索某个字段、对比两段 JSON 的差异。这些都不需要后端，仍然可以保持单文件、零依赖的形态。

## 小结

很多小工具的价值不在于技术复杂度，而在于「打开就能用、数据不出本机」。用原生技术栈把这个边界守好，比堆功能更重要。