HTML中嵌入JSON时需先提取再美化：用正则或sed提取<script type="application/json">内的JSON片段，再用jq或Prettier处理；写入时须避免</script>截断和引号转义冲突，推荐分离JSON文件。
HTML 里混着 JSON 字符串时，大多数 JSON 美化工具会直接报错或格式错乱——因为它们默认只处理纯 JSON，不识别 HTML 标签包裹结构。
JSON 字符串被 <script> 或 <textarea> 包裹时怎么美化
常见场景是把 JSON 嵌在 HTML 页面里，比如：<script type="application/json">{"name":"Alice","age":30}</script>。这类内容不能直接丢给 prettier、jq 或在线 JSON 工具，它们会卡在开头的 <script 或结尾的 </script> 上。
- 先用正则或手动提取 JSON 片段：匹配
<script[^>]*type=["']application/json["'][^>]*>(.*?)</script>（注意非贪婪），再对捕获组做美化 - 用
jq的话，得先用sed或awk切出 JSON 再传给jq .，例如：sed -n 's/.*<script[^>]*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 属性或 <script>，容易因引号、尖括号未转义导致解析失败。
- 写入
<script>时，确保 JSON 中不含</script>字符串（哪怕在字符串值里），否则浏览器提前截断；可用JSON.stringify(obj).replace(//g, '')预处理 - 写入 HTML 属性（如
data-config）时，必须用JSON.stringify()+encodeURIComponent()双重编码，读取端再decodeURIComponent()+JSON.parse() - 不要用
innerHTML = '<div data-json="' + JSON.stringify(obj) + '">'—— 单双引号嵌套和特殊字符会让 HTML 解析器崩溃
用 prettier 处理含 JSON 的 HTML 文件时的关键配置
prettier 默认不解析 HTML 内的 JSON，但可通过插件或调整配置有限支持。
立即学习“前端免费学习笔记（深入）”；
- 启用
prettier-plugin-xml对<script type="application/json">块做基础识别，但仅限无换行的简单 JSON；复杂嵌套仍需先抽离 - 在
.prettierrc中设置"htmlWhitespaceSensitivity": "ignore"，避免美化时意外破坏 JSON 字符串内的空格（JSON 对空白敏感，但 HTML 不） - 更稳妥的做法：把 JSON 提到单独的
.json文件中，HTML 用fetch()加载，既利于美化，也方便复用和校验
真正麻烦的不是 JSON 本身，而是 HTML 解析器和 JSON 解析器对同一段文本的“理解边界”不同——一个认标签，一个认结构。所有美化动作都得先明确：你是在美化 HTML，还是在美化 JSON？两者不可兼得，必须分步处理。
