缘由
网上的在线json格式化有很多，但我是个有追求的人。在线的很难同时支持折叠、有缩进线、代码高亮、离线的，方便部署的、易用的、不请求后端（为了安全）的json格式化工具。
去Github上找项目，华而不实的东西占半个屏幕，格式化json要点好几下，一个json格式化工具npm安装之后几百个文件。或者npm报错跟本跑不起来。
三个字：没眼看。
于是自己写了一个。
展示
- Github地址：https://github.com/song1024/json-format-viewer
就一个html，把json粘贴进去之后自动格式化，且符合标题所有优质特点。
优雅之处
- 易用：这一个纯粹的格式化json的查看器工具，使用起来向弹出的文本框中添加要被转的json，点击确定，没有多余的操作。
- 方便部署：就一个html文件，原生JavaScript实现，不依赖任何库，可双击打开或者HTTP协议访问，部署在服务器上也非常方便。
- 代码高亮：彩色的文字用于美观，复制格式化后的结果，也能保证格式整齐。
- 支持折叠：方便查看层级关系，点击小三角可折叠或展开json，Ctrl + 点击，可递归到子级，支持。
- 支持缩进：更直观的展示层级关系，并有缩进线使其更加优雅。
- 离线的：没有依任何在线的库，网线断了也能用。
- 安全：这个项目放服务器上，它不访问任何接口或者资源，不会有RCE，SQL injection等漏洞。
- 可配置：如果您不喜欢文字的颜色、字体、或者其它配置，可任意修改。
代码
<!DOCTYPE html>
<html>
<head><meta charset='UTF-8'><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JSON format viewer</title><style>*{margin: 0; padding:0; font-size: 16px; font-family: "Consolas", "Arial", "Monaco", "Osaka", "serif"; background-color: #272822; color: #fff}body {overflow-y: scroll; overflow-x: hidden;}pre{white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; display: block;}#json-renderer {padding: 1em 2em;}ul.json-dict, ol.json-array {list-style-type: none; margin: 0 0 0 1px; border-left: 1px dotted #666; padding-left: 2em;}.json-string-key {color: #7bdcfe;}.json-string {color: #ce9178;}.json-literal {color: #b5cea8; font-weight: bold;}a.json-toggle {position: relative; color: inherit; text-decoration: none; cursor: pointer;}a.json-toggle:focus {outline: none;}a.json-toggle:before {font-size: 1.1em; color: #666; content: "\25BC"; position: absolute; display: inline-block; width: 1em; text-align: center; line-height: 1em; left: -1.2em;}a.json-toggle:hover:before {color: #aaa;}a.json-toggle.collapsed:before {content: "\25B6";}a.json-placeholder {color: #aaa; padding: 0 1em; text-decoration: none; cursor: pointer;}a.json-placeholder:hover {text-decoration: underline;}.hidden {display: none;}</style>
</head>
<body>
<pre id="json-renderer"></pre>
</body>
<script>class JSONViewer {constructor(options = {}) {this.options = Object.assign({rootCollapsable: true, clickableUrls: true, bigNumbers: false}, options);}isCollapsable(arg) {return arg instanceof Object && Object.keys(arg).length > 0;}isUrl(string) {const protocols = ['http', 'https', 'ftp', 'ftps'];return protocols.some(protocol => string.startsWith(protocol + '://'));}htmlEscape(s) {return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/'/g, ''').replace(/"/g, '"');}json2html(json) {let html = '';if (typeof json === 'string') {json = this.htmlEscape(json);if (this.options.clickableUrls && this.isUrl(json)) {html += `<a href="${json}" class="json-string" target="_blank">${json}</a>`;} else {json = json.replace(/"/g, '\\"');html += `<span class="json-string">"${json}"</span>`;}} else if (typeof json === 'number' || typeof json === 'bigint') {html += `<span class="json-literal">${json}</span>`;} else if (typeof json === 'boolean') {html += `<span class="json-literal">${json}</span>`;} else if (json === null) {html += '<span class="json-literal">null</span>';} else if (Array.isArray(json)) {if (json.length > 0) {html += '[<ol class="json-array">';for (let i = 0; i < json.length; ++i) {html += '<li>';if (this.isCollapsable(json[i])) {html += '<a class="json-toggle"></a>';}html += this.json2html(json[i]);if (i < json.length - 1) {html += ',';}html += '</li>';}html += '</ol>]';} else {html += '[]';}} else if (typeof json === 'object') {if (this.options.bigNumbers && (typeof json.toExponential === 'function' || json.isLosslessNumber)) {html += `<span class="json-literal">${json.toString()}</span>`;} else {const keyCount = Object.keys(json).length;if (keyCount > 0) {html += '{<ul class="json-dict">';let count = 0;for (const key in json) {if (Object.prototype.hasOwnProperty.call(json, key)) {const jsonElement = json[key];const escapedKey = this.htmlEscape(key);const keyRepr = `<span class="json-string-key">"${escapedKey}"</span>`;html += '<li>';if (this.isCollapsable(jsonElement)) {html += `<a class="json-toggle">${keyRepr}</a>`;} else {html += keyRepr;}html += ': ' + this.json2html(jsonElement);if (++count < keyCount) {html += ',';}html += '</li>';}}html += '</ul>}';} else {html += '{}';}}}return html;}render(jsonData) {const html = this.json2html(jsonData);const rootElement = document.getElementById('json-renderer');if (this.options.rootCollapsable && this.isCollapsable(jsonData)) {rootElement.innerHTML = '<a class="json-toggle"></a>' + html;} else {rootElement.innerHTML = html;}const toggleChildren = (element, collapse) => {const childToggles = element.querySelectorAll('.json-toggle');childToggles.forEach(toggle => {const container = toggle.nextElementSibling;if (container && (container.classList.contains('json-dict') || container.classList.contains('json-array'))) {const isCollapsed = toggle.classList.contains('collapsed');if (collapse !== isCollapsed) {toggle.click();}}});};document.addEventListener('click', (e) => {if (e.target.matches('.json-toggle')) {e.preventDefault();const target = e.target;const listItem = target.closest('li') || target.parentElement;target.classList.toggle('collapsed');const container = target.nextElementSibling;if (container && (container.classList.contains('json-dict') || container.classList.contains('json-array'))) {container.classList.toggle('hidden');if (e.ctrlKey) {toggleChildren(container, target.classList.contains('collapsed'));}const siblings = container.parentNode.children;for (let i = Array.from(siblings).indexOf(container) + 1; i < siblings.length; i++) {if (siblings[i].classList.contains('json-placeholder')) {siblings[i].remove();i--;}}if (container.classList.contains('hidden')) {const count = container.children.length;let placeholder = document.createElement('a');placeholder.className = 'json-placeholder';placeholder.textContent = `${count} ${count > 1 ? 'items' : 'item'}`;if (!container.nextElementSibling?.classList.contains('json-placeholder')) {container.parentNode.insertBefore(placeholder, container.nextSibling);}}}} else if (e.target.matches('.json-placeholder')) {e.preventDefault();const toggle = e.target.previousElementSibling.previousElementSibling;if (toggle) {toggle.click();}}});}}const inputJson = prompt('Please enter json in the text box below:', '');if (! inputJson) {document.write('Empty json data.');} else {try {const viewer = new JSONViewer({clickableUrls: false});viewer.render(JSON.parse(inputJson));} catch (error) {document.write('Wrong json format.');}}
</script>
</html>
