json.stringify(obj, null, 2) 可原生格式化 json，需确保输入为对象/数组；若为字符串须先 parse 再 stringify 并 try/catch；禁用 innerhtml 直接赋值防 xss，应使用 textcontent 结合 pre 标签与 css white-space: pre-wrap。

直接用 JSON.stringify() 配合 pre 标签就能实现基础 JSON 格式化展示，无需第三方库，但要注意缩进、转义和 XSS 风险。

用 JSON.stringify() 做最简格式化

浏览器原生支持，传入第三个参数可控制缩进空格数。注意：输入必须是合法 JSON 对象或数组，不能是字符串（否则会把引号也转义）。

• 正确用法：JSON.stringify(obj, null, 2) —— null 表示不使用 replacer，2 表示每级缩进 2 个空格
• 错误用法：JSON.stringify('{"a":1}') → 输出 "{"a":1}"，变成双层字符串，无法正常渲染
• 若原始数据是字符串，先 JSON.parse() 再 stringify，但务必包在 try/catch 中

防止 XSS：别直接 innerHTML = formatted

JSON.stringify() 生成的字符串含双引号、尖括号等，若直接赋给 innerHTML，可能触发脚本执行（比如对象里有 <img src="1" onerror="alert(1)">）。

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

• 安全做法：用 textContent 赋值，再手动替换换行和空格为 HTML 实体（或用 white-space: pre-wrap + CSS 控制）
• 快速方案：用 document.createElement('pre').textContent = str，再 append 到容器中
• 不要写：el.innerHTML = '<pre class="brush:php;toolbar:false;">' + JSON.stringify(obj, null, 2) + '</pre>' —— 危险

加语法高亮要小心 DOM 操作粒度

纯前端高亮通常靠正则匹配 {、[、字符串、数字等，再包裹 span。但直接操作 innerHTML 易破坏结构，且正则难覆盖所有边界情况（如字符串里的 "}"）。

• 推荐策略：先用 JSON.stringify() 生成带缩进的字符串，再用正则对「顶层 token」做一次高亮（避免嵌套误匹配）
• 关键正则示例：/("(\u[a-zA-Z0-9]{4}|\[^u]|[^\"])*"(s*:)?|(true|false|null)|-?d+(?:.d*)?(?:[eE][+-]d+)?/g
• 替换时保留原始空白符，只包裹匹配内容，否则缩进错乱
• 更稳的方式：用 JSON.parse() 后递归遍历节点生成带 class 的 HTML 片段，但性能略低

真正难的不是格式化，而是处理非标准 JSON（如单引号、尾逗号、注释）、超大体积（>10MB）时的卡顿，以及保持缩进与高亮在不同缩放比例下的对齐——这些点容易被当成“能看就行”而忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！