JSON 格式化工具

JSON 格式化工具

项目简介

JSON 格式化工具是一款面向开发者的纯前端 JSON 处理应用，解决日常开发与调试中最高频的需求——把杂乱的 JSON 变得整齐、可读、可定位问题。无论是查看接口返回、配置整理还是日志分析，打开页面粘贴 JSON 即可获得带语法高亮的格式化结果，也可一键压缩为单行，方便存储与传输。

整个工具由单个 HTML 文件承载，转换全程在浏览器本地完成，JSON 数据不离开本机。

核心功能

• 格式化与压缩：2 空格缩进的格式化输出，或单行压缩输出，一键切换。

• 语法高亮：字符串、数字、布尔值、null 与键名分色显示，结构一目了然，便于快速扫描数据。

• 实时校验：输入非法 JSON 时显示具体错误信息（如「Unexpected token」），辅助定位语法问题。

• 结构统计：自动统计键值对、字符串、数字、布尔值、数组数量与最大嵌套深度，帮助理解复杂数据结构。

• 示例一键填充：内置简单、嵌套、数组三种典型示例，快速体验功能。

• 快捷操作：支持 Ctrl/⌘ + Enter 快速格式化。

技术架构

应用采用「输入面板 → 解析处理引擎 → 输出展示」的简洁三层结构，全部在浏览器端运行，无后端依赖。

• 输入面板层：文本输入区接收原始 JSON；工具栏提供格式化、压缩与示例填充操作。

• 解析处理引擎层：解析模块使用原生 JSON.parse 完成校验，非法输入捕获异常并提取错误消息；处理模块通过 JSON.stringify(parsed, null, 2) 生成格式化结果或单行压缩结果。

• 输出展示层：语法高亮模块用正则对序列化文本分色标注各类型 token；统计模块通过递归遍历对象结构汇总各项指标。

核心逻辑说明

语法高亮算法：对序列化后的 JSON 文本执行正则匹配，识别三类 token——带引号的字符串（以 : 结尾的判为键名，否则为字符串值）、true/false/null 关键字、以及数字。用 HTML 包裹并赋予不同 CSS 类实现分色，同时先对文本做 HTML 转义避免注入。

结构统计：递归遍历解析后的对象树，depth 记录当前层数并取最大值；键名计数在遍历对象时累加；字符串/数字/布尔分别计数；数组在入口处计数并继续深入其元素，得到完整结构画像。

错误处理：JSON.parse 抛出的异常被 try/catch 捕获，错误消息直接展示在输出面板并保留原始输入，方便用户修改后重试，避免页面崩溃。

技术栈

使用方式

直接用浏览器打开 index.html 即可使用；也可通过任意静态文件服务器托管后访问。

亮点与价值

• 零依赖、开箱即用：单个 HTML 文件承载全部能力，适合开发者随手救急。

• 高亮清晰：分色标注让复杂嵌套结构快速可读，提升排查效率。

• 数据隐私友好：JSON 全程不出浏览器，无网络请求，可安全处理敏感数据。

• 代码简洁可扩展：核心逻辑紧凑清晰，易于继续扩展（例如增加 JSON 路径查询、格式对比等功能）