HTML怎么做JSON格式化_html JSON数据格式化展示方法【方法】

JSON.stringify()可实现基础缩进格式化，但交互展开/折叠、语法高亮需第三方库或自封装；其兼容性好（IE8+），适合只读展示，但会丢弃undefined、函数、Date等非标准类型，且直接innerHTML存在XSS风险。

直接用 JSON.stringify() 就能搞定基础格式化，不需要引入任何库；但要交互式展开/折叠、语法高亮、点击收起节点，就得靠第三方组件或自己封装逻辑。

用 JSON.stringify() 快速生成缩进 JSON 字符串

这是最轻量、兼容性最好（IE8+）的方式，适合只读展示场景：

• JSON.stringify(obj, null, 2)：第二个参数为 null 表示不做过滤，第三个参数 2 表示用 2 个空格缩进
• 若传入 4 或 "  "，可控制缩进宽度或用空格/制表符
• 注意：如果原始 JSON 含有 undefined、函数、Date 对象或循环引用，JSON.stringify() 会静默丢弃或报错 —— 建议先用 JSON.parse(JSON.stringify(...)) 做一次“净化”再格式化
• 输出是纯字符串，需插入到 <pre><code> 中才能保留换行和空格，例如：

  document.getElementById('json-view').innerHTML = '<pre><code class="json">' +   JSON.stringify(data, null, 2) +   '</code></pre>';

用 jquery-jsonview 实现可交互的 JSON 树形视图

适合调试后台返回数据、做内部工具页，支持点击展开/折叠、层级控制、主题切换：

• 必须按顺序加载：jQuery → jquery.jsonview.css → jquery.jsonview.js
• CDN 地址已失效（rawgithub.com 已禁用），建议下载源码本地引用，或改用更现代的替代品如 json-viewer-js 或 react-json-view（若项目用 React）
• 初始化后调用方法如 $('#json').JSONView(json)，后续可用 collapse/expand/toggle 控制节点，参数如 1 表示只操作第一层子节点
• 注意 DOM 容器不能是 <p>（HTML 规范禁止块级元素嵌套块级元素），应改用 <div id="json">

避免踩坑：中文、null、HTML 标签字符导致渲染异常

直接把格式化后的 JSON 插入 HTML 容易被误解析，尤其含双引号、小于号、Unicode 字符时：

立即学习“前端免费学习笔记（深入）”；

• JSON.stringify() 输出的字符串里可能含 "、<、>，直接 innerHTML 会导致标签截断或 XSS 风险 —— 务必用 textContent 或 HTML 实体转义
• 推荐做法：

  const el = document.getElementById('json-view');el.textContent = JSON.stringify(data, null, 2); // 安全，但无语法高亮// 或用预处理转义：el.innerHTML = '<pre><code>' +   JSON.stringify(data, null, 2)    .replace(/&/g, '&')    .replace(/</g, '<')    .replace(/>/g, '>') +  '</code></pre>';

• null 值在 JSON 中合法，但某些旧版 jsonview 组件会渲染为空白或报错，建议测试前确认组件版本是否支持

要不要自己写一个轻量 JSON 查看器？

如果只需要基础折叠功能且不想引入 jQuery，可以基于 JSON.stringify + details/summary 实现原生方案：

• 利用 HTML5 的 <details> 标签天然支持展开/折叠，配合递归生成 DOM 节点
• 优点：零依赖、体积小、语义清晰；缺点：不支持搜索、复制整段、语法高亮需额外加 CSS
• 关键限制：IE 不支持 <details>，如需兼容 IE，还是得回退到 JS 模拟或用成熟库
• 复杂度容易被低估 —— 比如处理数组索引显示、对象 key 排序、循环引用检测、超大 JSON 渲染卡顿等问题，实际工作量不小