HTML JSON格式美化技巧与工具使用指南

本文深入解析了在HTML中嵌入JSON字符串时的美化难题与实用解决方案：由于主流JSON工具仅支持纯JSON输入，直接处理被HTML标签包裹的JSON会导致报错或格式混乱；文章详细介绍了先通过正则或sed精准提取JSON片段、再用jq或Prettier进行格式化的核心流程，并强调写入时需规避截断风险与引号转义冲突，最终推荐将JSON内容分离为独立文件以兼顾可维护性与安全性——帮你轻松告别杂乱无章的内联JSON，让数据清晰、代码健壮、调试高效。

HTML 里混着 JSON 字符串时，大多数 JSON 美化工具会直接报错或格式错乱——因为它们默认只处理纯 JSON，不识别 HTML 标签包裹结构。

JSON 字符串被 。这类内容不能直接丢给 prettier、jq 或在线 JSON 工具，它们会卡在开头的 或结尾的 上。

• 先用正则或手动提取 JSON 片段：匹配 ]*type=["']application/json["'][^>]*>(.*?)（注意非贪婪），再对捕获组做美化
• 用 jq 的话，得先用 sed 或 awk 切出 JSON 再传给 jq .，例如：sed -n 's/.*]*type=["'\'']application\/json["'\''][^>]*>\(.*\)<\/script>.*/\1/p' index.html | jq .
• VS Code 用户可装插件 Beautify + 配置 beautify.language 支持 html 和 json 混合识别，但需手动选中 JSON 内容再触发美化，不能全文件一键

JSON.stringify() 输出的 HTML 内联 JSON 怎么避免转义混乱

前端常通过 JSON.stringify(obj, null, 2) 生成带缩进的 JSON 写入 innerHTML 或 textContent，但若直接拼进 HTML 属性或 字符串（哪怕在字符串值里），否则浏览器提前截断；可用 JSON.stringify(obj).replace(//g, '') 预处理

写入 HTML 属性（如 data-config）时，必须用 JSON.stringify() + encodeURIComponent() 双重编码，读取端再 decodeURIComponent() + JSON.parse()

不要用 innerHTML = '

' —— 单双引号嵌套和特殊字符会让 HTML 解析器崩溃

用 prettier 处理含 JSON 的 HTML 文件时的关键配置

prettier 默认不解析 HTML 内的 JSON，但可通过插件或调整配置有限支持。

• 启用 prettier-plugin-xml 对