HTML怎么做JSON格式化_html JSON数据格式化展示方法【方法】-html教程-PHP中文网

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

html怎么做json格式化_html json数据格式化展示方法【方法】

直接用 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 class="brush:php;toolbar:false;"><code></code> 中才能保留换行和空格，例如：<pre class="brush:php;toolbar:false;">document.getElementById('json-view').innerHTML = '<pre class="brush:php;toolbar:false;"><code class="json">' + JSON.stringify(data, null, 2) + '</code></pre>';</pre></pre>

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

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

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

必须按顺序加载：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></p>（HTML 规范禁止块级元素嵌套块级元素），应改用 <div id="json"> <h3>避免踩坑：中文、null、HTML 标签字符导致渲染异常</h3> <p>直接把格式化后的 JSON 插入 HTML 容易被误解析，尤其含双引号、小于号、Unicode 字符时：</p> <ul> <li> <code>JSON.stringify() 输出的字符串里可能含 "、、<code>>，直接 innerHTML 会导致标签截断或 XSS 风险 —— 务必用 textContent 或 HTML 实体转义

推荐做法：

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