写一个支持折叠、有缩进、代码高亮、离线的,方便部署的、易用的、优雅的json格式化查看工具(附html完整代码)

缘由

网上的在线json格式化有很多,但我是个有追求的人。在线的很难同时支持折叠、有缩进线、代码高亮、离线的,方便部署的、易用的、不请求后端(为了安全)的json格式化工具。
去Github上找项目,华而不实的东西占半个屏幕,格式化json要点好几下,一个json格式化工具npm安装之后几百个文件。或者npm报错跟本跑不起来。
三个字:没眼看。
于是自己写了一个。

展示

优雅之处

  • 易用:这一个纯粹的格式化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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&apos;').replace(/"/g, '&quot;');}


        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(/&quot;/g, '\\&quot;');
                    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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,036评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,046评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,411评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,622评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,661评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,521评论 1 304
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,288评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,200评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,644评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,837评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,953评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,673评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,281评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,889评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,011评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,119评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,901评论 2 355

推荐阅读更多精彩内容