---
type: release
title: "JSON 格式化 / 压缩：纯前端在线 JSON 处理工具"
date: 2026-06-21 10:22:00 +0800
tags: [tool, json, formatter, browser, developer-tools]
linkUrl: https://wangjunjian.com/tools/json-prettifier.html
---

## JSON 格式化 / 压缩 是什么

JSON 格式化 / 压缩是一款纯前端在线 JSON 处理工具，无需联网、无需上传数据，所有操作均在浏览器本地完成。支持格式化、压缩、转义与去转义，适合开发者在日常工作中快速处理 JSON 数据。

---

## 核心功能

- **格式化**：将压缩的 JSON 文本一键展开为带缩进的可读格式，便于查看与调试。
- **压缩**：去除 JSON 中所有不必要的空格与换行，生成最小体积的 JSON 字符串。
- **转义**：将 JSON 对象序列化为转义后的字符串，方便嵌入代码或配置文件。
- **去转义**：将转义后的 JSON 字符串还原为原始内容，支持带引号或不带引号的输入。
- **一键复制**：处理结果可直接复制到剪贴板，无需手动选中。
- **一键清空**：快速清空输入与输出区域，方便处理下一段数据。
- **实时错误提示**：JSON 解析失败时，状态栏会显示具体错误信息，帮助定位问题。
- **深色模式支持**：自动跟随系统主题，也支持手动切换，长时间使用不刺眼。
- **左右分屏布局**：输入与输出并排显示，大屏对比查看更高效，移动端自动切换为上下布局。

---

## 使用方式

1. 打开 [JSON 格式化 / 压缩](https://wangjunjian.com/tools/json-prettifier.html)。
2. 将 JSON 文本粘贴到左侧输入框。
3. 点击工具栏上的 **格式化**、**压缩**、**转义** 或 **去转义** 按钮进行处理。
4. 处理结果即时显示在右侧输出框，点击 **复制结果** 即可复制到剪贴板。

---

## 技术栈

- HTML + CSS + JavaScript
- 无后端、无依赖、纯静态页面
- 支持深色模式与响应式布局

---

## 提示词

```
我要设计一个WEB应用（HTML），用于JSON格式化和压缩，纯前端运行，无需联网。有什么好的思路？先分析需求，进行设计，再实现（一个html），存储到 @tools/ 目录。
```