JSON 格式化

缩进/压缩/树视图/校验/高亮

432 次访问

JSON 格式化 / 校验 / 转换

输入 0 B
输出 JSON

JSONPath 查询

支持:$ 根节点 · .key 子属性 · [n] 数组索引 · [*] 通配 · ..key 递归搜索

使用说明

· 实时校验:输入会实时检测 JSON 语法,错误时定位到行号 / 字符位置

· 多格式转换:JSON → YAML / XML / CSV / TypeScript Interface(一键切换)

· JSONPath:按路径表达式取值($.user.name / $.list[*].price),适合从大型 JSON 中快速提取字段

· 树视图:可点击折叠 / 展开嵌套对象与数组

· 转义 / 反转义:将 JSON 文本转为字符串形式(用于嵌入代码 / SQL / 日志)

所有处理在浏览器本地完成,不上传任何服务器

关于本工具

了解工具定位 · 使用场景 · 对比优势

将杂乱的 JSON 文本整理为缩进格式、压缩为单行、切换树视图查看层级、校验语法错误、高亮关键字。前端开发调试接口返回、后端排查日志数据、运维查看配置文件时,粘贴即格式化。所有处理在浏览器内完成,内容不上传服务器。

使用场景

💻

API调试排错

后端开发者在对接第三方接口时,返回的 JSON 数据往往是一行无格式的字符串。复制到本工具后自动缩进高亮,一眼看出字段缺失、类型错误或嵌套层级异常。配合校验功能,能直接定位到第 25 行第 3 层对象缺少闭合括号,比人工逐行检查快 10 倍。

📦

配置文件编写

运维工程师修改 Nginx 或 Docker Compose 的 JSON 配置文件时,缩进混乱会导致服务启动失败。用本工具的格式化功能一键对齐缩进,树视图可展开折叠查看嵌套结构,避免因多一个逗号或少一个花括号引发的生产事故。

🔍

日志分析定位

数据分析师从 ELK 或 S3 导出的 JSON 日志文件长达数千行,手动翻找特定字段如 user_id 或 error_code 非常耗时。在本工具中开启高亮后,相同键名自动着色,配合压缩模式去除换行和空格,能快速复制关键片段分享给同事排查。

📝

前端联调验证

前端开发者在浏览器控制台复制接口返回的 JSON 响应,粘贴到工具后立即格式化为可读结构。树视图可逐层展开 data.list[0].attributes,对比接口文档确认字段名和数据类型,发现后端返回了字符串而非数字时,直接截图作为 Bug 证据发给后端。

🧪

测试数据构造

测试工程师需要手动编写 10 组不同边界的 JSON 请求体用于接口自动化测试。用本工具的压缩模式将多行 JSON 合并为一行,方便直接粘贴到 Postman 或 curl 命令中;校验功能能提前检测到字符串未加引号或布尔值拼写错误,避免发无效请求。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具jsonformatter.curiousconcept.com传统方法(编辑器/手工)
数据隐私纯浏览器,零上传上传到服务器处理完全离线,无网络风险
处理速度1 秒内2-5 秒(含网络延迟)数秒到数分钟(取决于文件大小和编辑器性能)
离线可用完全离线需要网络完全离线
大小限制受浏览器内存限制(通常 100MB+)受服务器上传限制(通常 10-50MB)受本地编辑器/系统内存限制
树视图交互支持,可折叠/展开/搜索支持,可折叠/展开依赖编辑器插件,功能有限
校验反馈实时高亮错误位置提交后返回错误信息需手动检查或使用命令行工具
压缩/美化切换一键切换,即时预览需重新提交请求需手动替换或使用脚本

使用指南

上手步骤 · 输入输出 · 避坑提示

使用步骤

  1. 在左侧编辑区粘贴或直接输入 JSON 文本,支持手动键入与 Ctrl+V 粘贴
  2. 点击「格式化」按钮,自动按标准缩进对齐并高亮语法
  3. 切换「压缩」模式,移除所有空格与换行,生成单行紧凑 JSON
  4. 点击「树视图」按钮,以可折叠层级结构浏览 JSON 对象与数组
  5. 底部校验区实时显示 JSON 语法状态:合法显示绿色「Valid」,错误显示红色错误位置与原因

输入输出示例7 个典型场景,覆盖常规、边界与易错

输入输出说明
{"name":"张三","age":30,"city":"北京"}{ "name": "张三", "age": 30, "city": "北京" }典型场景:单层简单 JSON 格式化
{"users":[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]}{ "users": [ { "id": 1, "name": "Alice" }, { "id": 2, "name": "Bob" } ] }典型场景:嵌套数组与对象的层级缩进
{"data":[],"meta":{}}{ "data": [], "meta": {} }边界 case:空数组和空对象的格式化
{"longKey":"这是一个很长的字符串值,用于测试格式化后是否换行","number":12345678901234567890}{ "longKey": "这是一个很长的字符串值,用于测试格式化后是否换行", "number": 12345678901234567890 }边界 case:长字符串和大数字的显示
{"name":"张三","age":30,}第 1 行:JSON 解析错误:第 1 行第 24 列:多余的逗号易错 case:末尾多余逗号导致校验失败
{'name':'张三','age':30}第 1 行:JSON 解析错误:第 1 行第 2 列:期望双引号,但遇到单引号易错 case:误用单引号替代双引号
{"name":"张三","age":30,"city":"北京"}{"name":"张三","age":30,"city":"北京"}典型场景:压缩模式移除所有空白字符

常见错误对照7 个常踩的坑 · 错误 → 修复

1. 单引号代替双引号

错误
{'name': '张三', 'age': 30}
修复
{"name": "张三", "age": 30}

JSON 标准(RFC 8259)规定键和字符串值必须用双引号;单引号是 JavaScript 对象字面量语法,非 JSON 格式

2. 注释混入 JSON 文本

错误
{
  "name": "张三", // 用户姓名
  "age": 30 /* 年龄 */
}
修复
{
  "name": "张三",
  "age": 30
}

JSON 不支持任何注释(// 或 /* */);注释是 JSON5、HJSON 等扩展格式的特性,标准 JSON 解析器会直接报错

3. 键名不加引号

错误
{name: "张三", age: 30}
修复
{"name": "张三", "age": 30}

JavaScript 对象允许无引号键名,但 JSON 要求所有键名必须用双引号包裹;无引号键名会被 JSON.parse 拒绝

4. 数值前多余的零

错误
{"value": 0123}
修复
{"value": 123}

JSON 不允许前导零(除非是 0 本身);0123 会被解析器视为无效数字,因为八进制字面量不在 JSON 规范中

5. 未转义的字符串特殊字符

错误
{"path": "C:\Users\test"}
修复
{"path": "C:\\Users\\test"}

反斜杠 \ 在 JSON 字符串中必须转义为 \\;未转义的反斜杠会被解释为转义序列起始,导致解析失败

6. 布尔值/空值大小写错误

错误
{"active": True, "deleted": Null, "enabled": FALSE}
修复
{"active": true, "deleted": null, "enabled": false}

JSON 的布尔值和空值必须全小写(true/false/null);Python 的 True/None 或 JS 的 undefined 都不是合法 JSON 值

7. 多层嵌套末尾多逗号

错误
{
  "items": [
    {"id": 1},
    {"id": 2},
  ],
}
修复
{
  "items": [
    {"id": 1},
    {"id": 2}
  ]
}

对象和数组的最后一个元素后都不能有逗号;多层嵌套时每层末尾都要检查,常见于手动编辑或拼接 JSON 时遗漏

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

缩进格式化:在每层嵌套前插入 N × indent_size 个空格,其中 N 为嵌套深度

变量说明

  • N — 当前 JSON 节点的嵌套深度
  • indent_size — 每层缩进的空格数(通常 2 或 4)

示例

输入 JSON:{"a":{"b":1,"c":2}}。设置 indent_size=2。根对象深度 N=0,不缩进。键 "a" 深度 N=1,缩进 2 空格。键 "b" 和 "c" 深度 N=2,缩进 4 空格。格式化后:{\n "a": {\n "b": 1,\n "c": 2\n }\n}

适用范围

适用于所有合法 JSON 字符串的缩进格式化。不适用于非 JSON 数据(如 YAML/XML)或语法错误的 JSON。缩进规则遵循 RFC 8259 标准。

原理图

输入原始JSON粘贴 / 上传 / 拖拽浏览器内解析语法校验 → 词法分析→ 构建树结构格式化输出缩进 / 压缩 / 树视图校验失败 → 标红错误位置成功 → 语法高亮着色所有处理在浏览器本地完成,数据不上传服务器
用户输入 本地处理 输出结果

开发者集成

3 种主流语言 · 复制即用

import json

# 示例输入:JSON 字符串(可能来自文件或 API)
raw = '{"name":"Alice","scores":[95,87,92],"meta":{"grade":"A"}}'

# 1. 格式化(缩进 2 空格)
parsed = json.loads(raw)
formatted = json.dumps(parsed, indent=2, ensure_ascii=False)
print(formatted)
# 输出:
# {
#   "name": "Alice",
#   "scores": [
#     95,
#     87,
#     92
#   ],
#   "meta": {
#     "grade": "A"
#   }
# }

# 2. 压缩(去掉所有空白)
compressed = json.dumps(parsed, separators=(',', ':'), ensure_ascii=False)
print(compressed)  # {"name":"Alice","scores":[95,87,92],"meta":{"grade":"A"}}

# 3. 校验(捕获解析异常)
try:
    json.loads(raw)
    print("Valid JSON")
except json.JSONDecodeError as e:
    print(f"Invalid JSON: {e}")
package main

import (
	"encoding/json"
	"fmt"
	"log"
)

func main() {
	raw := `{"name":"Alice","scores":[95,87,92],"meta":{"grade":"A"}}`

	// 1. 解析到通用结构
	var data interface{}
	if err := json.Unmarshal([]byte(raw), &data); err != nil {
		log.Fatalf("Invalid JSON: %v", err)
	}

	// 2. 格式化输出(缩进 2 空格)
	formatted, err := json.MarshalIndent(data, "", "  ")
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(string(formatted))
	// 输出:
	// {
	//   "name": "Alice",
	//   "scores": [
	//     95,
	//     87,
	//     92
	//   ],
	//   "meta": {
	//     "grade": "A"
	//   }
	// }

	// 3. 压缩(紧凑输出)
	compressed, _ := json.Marshal(data)
	fmt.Println(string(compressed))
	// {"name":"Alice","scores":[95,87,92],"meta":{"grade":"A"}}
}
// 示例输入:JSON 字符串
const raw = '{"name":"Alice","scores":[95,87,92],"meta":{"grade":"A"}}';

// 1. 格式化(缩进 2 空格)
try {
  const parsed = JSON.parse(raw);
  const formatted = JSON.stringify(parsed, null, 2);
  console.log(formatted);
  // 输出:
  // {
  //   "name": "Alice",
  //   "scores": [
  //     95,
  //     87,
  //     92
  //   ],
  //   "meta": {
  //     "grade": "A"
  //   }
  // }

  // 2. 压缩(无空格)
  const compressed = JSON.stringify(parsed);
  console.log(compressed);
  // {"name":"Alice","scores":[95,87,92],"meta":{"grade":"A"}}
} catch (e) {
  console.error('Invalid JSON:', e.message);
}

// 3. 校验(单独使用)
function isValidJSON(str) {
  try {
    JSON.parse(str);
    return true;
  } catch {
    return false;
  }
}
console.log(isValidJSON(raw)); // true

常见问题

7 个高频疑问

粘贴 JSON 后格式化没反应,是不是工具坏了?
最常见原因是 JSON 格式本身有语法错误,工具会静默等待合法输入。可以打开浏览器的开发者控制台(F12 → Console),如果粘贴的是非法 JSON(比如多了一个逗号、引号没闭合),控制台会提示具体错误位置。另一种情况是粘贴内容过大(超过 10MB),浏览器解析会卡顿几秒,并非工具无响应。建议先粘贴一小段测试,确认工具正常后再处理大文件。
格式化后的 JSON 和原版不一样,数据会不会变了?
格式化只改变缩进、换行和空格,不会修改键值对、数组顺序或数值本身。可以对比验证:把格式化后的内容复制出来,用另一个在线工具或本地编辑器压缩成一行,再与本工具压缩后的结果对比,两者应完全一致。唯一视觉差异是:数字末尾的 .0 可能会保留(如 3.0 vs 3),这是 JSON 标准允许的,数据精度不变。
树视图里点某个节点,能不能直接复制它的路径?
当前版本树视图支持点击展开/折叠节点,但暂未内置一键复制路径功能。替代方法是:在树视图找到目标节点后,手动拼接路径(如 data.users[0].name),或把该节点所在片段复制到编辑器里自行提取路径。如果频繁需要此功能,建议先用格式化结果配合浏览器的查找功能(Ctrl+F)定位字段,再用文本编辑器的替换功能提取。
为什么压缩后的 JSON 比别的工具大一点?
本工具的压缩模式移除了所有缩进和换行,但保留了键名引号、冒号后空格等 JSON 标准必需字符。如果发现体积比某些工具大,原因通常是:对方工具做了更激进的压缩(如去掉键名引号——这已不是标准 JSON,而是 JSON5 或对象字面量);或者你的 JSON 包含转义字符(如 \n),压缩后转义字符本身占位不变。可以用本工具的校验功能确认压缩结果是否合法 JSON。
校验说 JSON 合法,但复制到代码里报错,怎么回事?
本工具校验的是 JSON 语法本身(引号、括号、逗号、数值格式),不校验业务逻辑。常见场景:校验通过但代码报错,可能是 JSON 里包含 JavaScript 注释(// 或 /* */),这不符合 JSON 标准,但某些解析器(如 V8 的 JSON.parse)会拒绝。也可能是键名重复(标准允许但某些库报错),或数值超了语言精度(如 9999999999999999 在 JS 中会被截断)。建议用工具校验后,再检查目标运行环境的特殊限制。
这个工具和 VS Code 里的格式化插件有什么区别?
核心区别在运行环境和功能侧重:VS Code 插件(如 Prettier)是本地编辑器插件,依赖 Node.js,适合开发时批量格式化多文件;本工具是纯浏览器端,无需安装,适合临时查看一段 JSON、快速验证合法性或分享格式化结果。本工具额外提供了树视图浏览和压缩功能,但缺少插件可配置的缩进大小、尾逗号策略等参数。如果只是偶尔处理一段 JSON,用这个工具更快;如果是日常开发项目,建议用 VS Code 插件。
工具能处理 JSON 里有中文或特殊字符吗?
可以。JSON 标准支持 UTF-8 编码,中文字符、日文、表情符号等都能正常显示和格式化。注意两点:如果原始 JSON 是用 Unicode 转义(如 \u4e2d\u6587),格式化后会显示为转义序列而非实际字符,这是标准行为(工具不自动解码转义)。另外,特殊字符如制表符、换行符在字符串内会显示为 \t 和 \n,这是 JSON 的合法表示,复制时注意保持原样。
选择 打开 +新窗口 esc关闭