HTML JSON数据格式化展示方法

JSON格式化展示：从基础到交互的完整方案

JSON格式化展示，原生JSON.stringify()即可完成基础操作，这是最轻量的办法——无需第三方库，直接实现字符串格式化。但若需交互式展开收起、语法高亮、节点点击等体验，则需引入组件或手写逻辑。

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

作为最基础、兼容性最广（IE8+ 可用）的方案，适合仅需只读展示的场景：

• 核心调用：JSON.stringify(obj, null, 2)——第二个参数 null 表示不做值过滤，第三个参数 2 使用 2 个空格缩进。
• 改为 4 或传递制表符 "\t"，可控制缩进宽度或风格。
• 常见陷阱：若 JSON 包含 undefined、函数、Date 对象或循环引用，JSON.stringify() 会静默丢弃这些值或报错中断。稳妥做法是先执行 JSON.parse(JSON.stringify(...)) 进行“净化”。
• 输出为纯字符串，需保留换行和空格，应放入

   中。标准实现：
  document.getElementById('json-view').innerHTML = '
  ' + JSON.stringify(data, null, 2) + '
  ';

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

后台调试数据或内部工具页需交互操作时，树形视图适用——支持展开收起、层级控制、换肤：

• 加载顺序要求：jQuery → jquery.jsonview.css → jquery.jsonview.js，顺序错误会报错。
• 旧版 CDN 地址（如 rawgithub.com）已停用。若项目仍用此类库，建议下载源码本地引用，或改用更新替代品——例如 json-viewer-js，或 React 生态中的 react-json-view。
• 初始化用法：$('#json').JSONView(json)。后续可调用 collapse/expand/toggle 控制节点展开层级。参数 1 表示仅操作第一层子节点。
• 容器选择：避免使用
  ——HTML 规范不允许块级元素嵌套块级元素。建议用
  等块级容器。

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

  直接将格式化后的 JSON 字符串插入 HTML，易被浏览器误解析，尤其包含双引号、小于号、Unicode 字符时：

  • JSON.stringify() 输出字符串可能含有 "、<、>。若用 innerHTML 插入，浏览器会解析为 HTML 标签——轻则显示异常，重则引发 XSS 攻击。
  • 推荐安全做法：用 textContent 设置纯文本内容（失去语法高亮），或进行彻底 HTML 实体转义后再插入：

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

  • 容易被忽略的问题：null 在 JSON 中合法，但某些早期 jsonview 组件可能渲染为空白或报错。使用前需进行兼容性测试。

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

  若仅需基本展开收起功能，且不愿引入 jQuery 生态，可利用 JSON.stringify 配合 HTML5 的

  /

  标签实现原生方案：

  • 利用
    天然支持展开收起，配合递归生成 DOM 节点，实现基础树形视图。
  • 优点：零依赖、体积小、语义清晰。缺点：不支持搜索、无法复制整段，语法高亮需额外 CSS。
  • 关键限制：IE 不支持
    。若需兼容 IE，应回退到 JS 模拟或使用成熟库。
  • 此方案复杂度易被低估——处理数组索引显示、对象 key 排序、循环引用检测、超大 JSON 渲染卡顿等细节，实际开发工作量不小。

  总体而言，选择方案需考虑 JSON 数据规模、交互需求及项目兼容性。理解底层原理后，决策将更加清晰。