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

作者：袖梨 2026-06-26

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>';