☰

JSON Viewer

格式化显示JSON使数据看起来更加漂亮，支持折叠/展开格式化后的数据，支持JSON脑图让调用层级看着更清晰，支持复制JSON脑图节点路径

当前为 2024-10-06 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @license      MIT
  3. // @name         JSON Viewer
  4. // @namespace    http://tampermonkey.net/
  5. // @version      0.5.3
  6. // @note         v0.5.3 增加暗黑主题色
  7. // @note         v0.5.2 单击JSON格式化的key可复制JSONPath
  8. // @note         v0.5.1 修复JSONPath提示有误
  9. // @note         v0.5.0 解决chrome 120+以上内核JSON格式化不执行和引入layer报错问题
  10. // @note         v0.4.9 布局修改，增加保存JSON/脑图为文件，增加JSON过滤，鼠标移入key提示JSONPath
  11. // @note         v0.4.8 代码优化
  12. // @note         v0.4.7 增加对JSONP的判断，代码优化
  13. // @note         v0.4.6 增加复制按钮，JSON脑图CSS样式细节优化，JSON脑图增加收起/展开子节点按钮
  14. // @note         v0.4.5 在json-viewer-updated原基础上进行了一些修改，主要有CSS样式修改，新增折叠/展开全部功能，新增JSON脑图功能，脑图节点点击显示调用路径
  15. // @description   格式化显示JSON使数据看起来更加漂亮，支持折叠/展开格式化后的数据，支持JSON脑图让调用层级看着更清晰，支持复制JSON脑图节点路径
  16. // @author       Feny
  17. // @match        *://*/*
  18. // @grant        GM_addStyle
  19. // @grant        GM_getValue
  20. // @grant        GM_setValue
  21. // @grant        unsafeWindow
  22. // @grant        GM_setClipboard 
  23. // @grant        GM_getResourceText
  24. // @icon         data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAeAB4AAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAgACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD9wvjF8bLX4ZrHZx+XNqlwnmKjH5YUyRvb6kEAd8H058d1b47XV5Ir3eoN++bagaXYrN6KOBn2FfPPx5/aEutX8a+KNWhIubhruZLSNj8u1WMcIOP4QoXOOwNS/wDBM79lDTfjh8YNe+IXj63TxRdeHfKjsE1KMTxtdSbmMmxvlAiVV2IBsUybgAyKR9ZTy6lhsM69Xovm2+iPmKmOqYjEKjT6v5WXU9e8beKrjxZpp/s/xFrfhjWIwWs9X0q42z2kmPlZo2zDcxjqYZ0eNv7obDDf/YL/AG8L745eJNc+G3xCttP0n4qeEWZZ2sVZNP8AENsu0rd2ysS0ZKPG7RMSQsisCcukWd+3x4RtfhpqGk+JNPjS0g1mV7a8iT5UM4XesgHYsofdjglQepJPxwPE1x4V/au8LePtNkeK40ma0lmdDgyorvHMhPo9uxjP+y1bUcHRxmGbS1adn1TXT0/4fcipiqmExCi3pfVdGn19f+GLni/w7ceGf2wPFXga+Vo5rW/vDbI3WWI/v4HA/wBqBg3tk+lfWX7AXia1+F/iDV9B1CRbWHXjFLayyHannpuUxk+rqy4zxlMdWAPQft7fsL33x91nQfiD4DutP0r4oeDXVrT7cWWx1y3UsTZ3LKCyAh5FEigkLLIpHzBk5vwj4JuvE2kLJfeHdY8N6lGAl5pepwBZrOT+JRIuYp0ByBNCzxPg4bIICqYyljMKot62Sa6prr6P/gBDC1MLiHJLS90+jT6ev/Dnmn/BVP8Aaw0nxv4/8P8Aw18KXK69qmk3MlxqEdiRMwuivlpbrtPLopkMnZNy5IIYLyPwa/Z8vvEmv+HtHu4/Ovr+5iS6KDcqAtukwe6om7nuEJxX0XoH7PK/bJG0vRoY5rr/AFslvbLGZf8AfcAf+PGvafgv8CbX4byNqFyI5tWmXYCoytsh6qvqx7t+A4yWiWYUsLhlRpbr72318kVHA1MTiHVqbP7kl0P/2Q==
  25. // @require      https://code.jquery.com/jquery.min.js
  26. // @require      https://unpkg.com/jsmind@0.8.5/es6/jsmind.js
  27. // @require      https://unpkg.com/dom-to-image@2.6.0/dist/dom-to-image.min.js
  28. // @require      https://unpkg.com/jsmind@0.8.5/es6/jsmind.screenshot.js
  29. // @resource     swalStyle https://unpkg.com/jsmind@0.8.5/style/jsmind.css
  30. // ==/UserScript==
  31.  
  32.  
  33. (function() {
  34.     'use strict';
  35.  
  36.     const Utils = {
  37.         // 检查字符串是否为URL
  38.         isUrl: function (string) {
  39.             var regexp = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
  40.             return regexp.test(string);
  41.         },
  42.  
  43.         // 检查是否是图片链接
  44.         isImg: function (pathImg) {
  45.             // var regexp = /^(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?\/([\w#!:.?+=&%@!\-\/])*\.(gif|jpg|jpeg|png|GIF|JPG|PNG)([\w#!:.?+=&%@!\-\/])?/;
  46.             let regexp = /\.(ico|bmp|gif|jpg|jpeg|png|svg|webp|GIF|JPG|PNG|WEBP|SVG)([\w#!:.?+=&%@!\-\/])?/i
  47.             return regexp.test(pathImg);
  48.         },
  49.         // 检验内容是否是json格式的内容
  50.         isJSON: function (str) {
  51.             try {
  52.                 JSON.parse(str)
  53.                 return true
  54.             } catch(e) {
  55.                 console.log("is not json", e)
  56.                 return false
  57.             }
  58.         },
  59.         // 获取数据类型
  60.         getType: function (value){
  61.             return Object.prototype.toString.call(value).match(/\s(.+)]/)[1].toLowerCase();
  62.         },
  63.         // JSON 过滤
  64.         filterJson: function(json, filter) {
  65.             if(!filter){
  66.                 return json
  67.             }
  68.  
  69.             filter = filter.toLowerCase()
  70.             let newJSON = Utils.getType(json) == 'array' ? [] : {}
  71.             for (let key in json) {
  72.                 let val = json[key]
  73.                 if (typeof val === 'object') {
  74.                     let subJSON = this.filterJson(val, filter);
  75.                     if (Object.keys(subJSON).length > 0) {
  76.                         newJSON[key] = subJSON;
  77.                     }
  78.                 }else{
  79.                     if(key.toLowerCase().includes(filter.toLowerCase())){
  80.                         newJSON[key] = val
  81.                     }
  82.  
  83.                     if(val !== null && val.toString().toLowerCase().includes(filter.toLowerCase())){
  84.                         newJSON[key] = val
  85.                     }
  86.                 }
  87.             }
  88.             return newJSON;
  89.         }
  90.     }
  91.  
  92.     // jquery.json-viewer 插件 开始
  93.     // 解决和原网页jquery版本冲突
  94.     var _jQuery = jQuery.noConflict(true);
  95.     (function($){
  96.         /**
  97.          * 检查 arg 是否为至少包含 1 个元素的数组或至少包含 1 个键的字典
  98.          */
  99.         function isCollapsable(arg) {
  100.             return arg instanceof Object && Object.keys(arg).length > 0;
  101.         }
  102.  
  103.         /**
  104.          * 将 JSON 对象转换为 HTML 表示形式
  105.          * @return string
  106.          */
  107.         function json2html(json, parentPath = '') {
  108.             let html = '', type = Utils.getType(json)
  109.             switch(type){
  110.                 case 'array':
  111.                 case 'object':
  112.                     let len = json.length || Object.keys(json).length;
  113.                     if (len > 0) {
  114.                     html += `<span class="json-brackets ${type == 'array' ? 'json-square-brackets' : 'json-curly-brackets'}">`;
  115.                     html += type === 'array' ? '[</span><ol class="json-array">' : '{</span><ul class="json-object">';
  116.                         for (var key in json) {
  117.                             if (json.hasOwnProperty(key)) {
  118.                                 let comma  = --len > 0 ? ',' : '',
  119.                                     jsonPath = parentPath + '.' + key,
  120.                                     collapse = isCollapsable(json[key]) ? '<a href class="json-toggle"></a>' : '',
  121.                                     res = json2html(json[key], jsonPath)
  122.                                 let toHtml = type === 'array' ? res : `<span class="json-key">"${key}"</span>: ${res}`
  123.                                 html += [`<li json-path="${jsonPath}">`, collapse, toHtml, comma, '</li>'].join('')
  124.                             }
  125.                         }
  126.  
  127.                         if(type === 'array'){
  128.                             html += `</ol><span class="json-brackets ${type == 'array' ? 'json-square-brackets' : 'json-curly-brackets'}">]</span>`
  129.                         }else{
  130.                             html += `</ul><span class="json-brackets ${type == 'array' ? 'json-square-brackets' : 'json-curly-brackets'}">}</span>`
  131.                         }
  132.                     }else{
  133.                         html += `<span class="json-brackets ${type == 'array' ? 'json-square-brackets' : 'json-curly-brackets'}">`
  134.                         html += (type === 'array') ? '[]' : '{}'
  135.                         html += '</span>'
  136.                     }
  137.                     break
  138.                 default:
  139.                     /* Escape tags */
  140.                     json = type === 'string' ? json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') : json
  141.                     if (Utils.isUrl(json)){
  142.                         html += `<a target="_blank" href="${json}" class="json-string">"${json}"</a>`;
  143.                     }else{
  144.                         json = type === 'string' ? `"${json}"` : json
  145.                         html += `<span class="json-${type}">${json}</span>`;
  146.                     }
  147.                     break
  148.             }
  149.             return html;
  150.         }
  151.  
  152.         $.fn.jsonViewer = function(json, jsonpFun) {
  153.             return this.each(function() {
  154.                 /* Transform to HTML */
  155.                 var html = json2html(json);
  156.                 /** is JSONP */
  157.                 if(jsonpFun !== undefined && jsonpFun !== null){
  158.                     html = `<div>${jsonpFun}(</div>${html}<div>)</div>`
  159.                 }
  160.                 /* Insert HTML in target DOM element */
  161.                 $(this).html(html);
  162.  
  163.                 /* Bind click on toggle buttons */
  164.                 $(this).off('click');
  165.                 $(this).on('click', 'a.json-toggle', function() {
  166.                     var target = $(this).toggleClass('collapsed').siblings('ul.json-object, ol.json-array');
  167.                     target.toggle();
  168.                     if (target.is(':visible')) {
  169.                         target.siblings('.json-placeholder').remove();
  170.                     }else {
  171.                         var count = target.children('li:not([class*="hidden"])').length;
  172.                         var placeholder = count + (count > 1 ? ' items' : ' item');
  173.                         target.after('<a href class="json-placeholder">' + placeholder + '</a>');                    
  174.                     }
  175.                     return false;
  176.                 });
  177.  
  178.                 /* Simulate click on toggle button when placeholder is clicked */
  179.                 $(this).on('click', 'a.json-placeholder', function() {
  180.                     $(this).siblings('a.json-toggle').click();
  181.                     $(this).siblings('a.json-placeholder').remove();
  182.                     return false;
  183.                 });
  184.             });
  185.         };
  186.     })(_jQuery);
  187.     // jquery.json-viewer 插件 结束
  188.  
  189.     (function($){
  190.         var source = $('pre').first();
  191.         if(source.length === 0){
  192.             return
  193.         }
  194.         
  195.         let rawText = source.text()
  196.         if(!rawText){
  197.             return
  198.         }
  199.  
  200.         // 判断是否为jsonp格式
  201.         let jsonpFun = null, tokens = rawText.match(/^([^\s(]*)\s*\(([\s\S]*)\)\s*;?$/)
  202.         if (tokens && tokens[1] && tokens[2]) {
  203.             jsonpFun = tokens[1]
  204.             rawText= tokens[2]
  205.         }
  206.  
  207.         if(!Utils.isJSON(rawText)){
  208.             return
  209.         }
  210.  
  211.         // 随机rgb颜色
  212.         let rgbaColor = `${Math.random()*256}, ${Math.random()*256}, ${Math.random()*256}`
  213.         // 添加样式
  214.         GM_addStyle(GM_getResourceText('swalStyle'))
  215.         $("head").append(`<link rel="stylesheet" type="text/css" href="https://unpkg.com/layer-src@3.5.1/dist/theme/default/layer.css"/>`)
  216.         .append('<script src="https://unpkg.com/layui@2.9.17/dist/layui.js" type="text/javascript" ></script>')
  217.  
  218.         GM_addStyle(`
  219.             body, html{
  220.                 margin: 0;
  221.                 padding: 0;
  222.                 font-size: 14px;
  223.             }
  224.             td{
  225.                 font-size: 14px;
  226.             }
  227.             li::marker {
  228.                 content: '';
  229.             }
  230.             .hidden{
  231.                 display: none !important;
  232.             }
  233.             .scroll-top{
  234.                 width: 48px;
  235.                 height: 48px;
  236.                 z-index: 999;
  237.                 position: fixed;
  238.                 right: 30px;
  239.                 bottom: 30px;
  240.                 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA39JREFUaEPtmV2ITVEUx39rJjT5KPKC5DPKK6UGZZ7Eq0whNUiKFPfcKW9mnmjm7ssLaSLygEx5xItMESnKC4V8FV4IJUkyS+fMHZ07zjl3733PvT6a+3S6Z629/r+99sfa+wgpPw1YDtxLe9/k/1eI4X5STMkSokXWNlloYjgpMZSmIxPgbxBfS8M4QK0eavT78Qw0uodrtd+wDGjAMqBcEVAQw6NaYnzeNwRAi2xBOQlMrYj6jLJTygz6iMzyyR1Ai+xCGUgMqnTmDZErgBYoIJjMXhY2S4mLeWUiNwAt0INwyEqY0iNleq1saxjlAqAB64BrToKEHVLijJNPgnHdALqPaUziOsoKRzGfaKFD+nng6FdlXj+Ay9AZq1Q5L2W2/jEA3c8sWqOSe3aCiK/A3cr/K4G2FKEbxXDZF6KuDKROXKWXFvqlxJdQmBaZzDDdKZP8thhW/RmAgKfA4qrgSq+U6UkSlAostEuJOz4Q3hnQgPXAld+CCh1pB5DogKTcSBAalhpHmw1wGtgxJuhbMczJEqIBbxLmzFUxbGg2gCYE9AVADF6jwctJDzKd73xI7DG/IQQTmCFH+OiaBT+AAyykhWcpBZv7JA4bGmaRHOV5cwBqX7mc5Qe9coyX0TK6n/m0RnVSV4bA1KuTLCi/DBTYhHCpRm+Fe8Bo/b8JmJxp71lqOwNowB7guGuqLe33iuGEpW1k5gTgVDK7qIjbZmyESU1aA1TOuA99dTn5CQulxAsbH3uAeqpOGyXVNrvEcMrGzR4gIGnjsonhYzMkhg4bx3EAm17ysGlIBh4DSzzE+LgMiGG3jaPLEApv2Q7YNFq3jcOmZg9gt/u6aH8PzEx0aGWu9PHapjFrgKimCaIDTHiQqf4pNxHW2AT8ZaMEiZdgSreUKdm25QRQgRi7nIZzI7xZcPmeNkAL5xjmVpVQx1049HUGiCAKFBH6K8GjFUP3MIW2CGJpjd4bFEPnmM54grA761tYWpteAJXgy1A6w6p09Opcu1nED7ZlAcQP/BqwGZjORAblMO9sh03czhsgLZgW6EL4JoYL0b0RTArPBfFnH6G5ZyAVYKTkGBlWQVR2bxDDgvjzvwQQXqGsDQ/sGkTXKdHzOECsB3LtjdjKMjqE/qMMjJwn5olh+98+hM6gvAqXy0aN+4Yuo/HG/weAPmC1GNrzHDbxtn4Coc0pQNdM3UAAAAAASUVORK5CYII=)
  241.             }
  242.             /** 工具栏样式 START **/
  243.             .flex-container{
  244.                 z-index: 10;
  245.                 position: fixed;
  246.                 width: 100vw;
  247.                 height: 100vh;
  248.                 display: flex;
  249.                 flex-direction: column;
  250.             }
  251.             .tabs, .toolbar{
  252.                 display: flex;
  253.                 line-height: 28px;
  254.                 background: #f3f3f3;
  255.                 border-bottom: 1px solid #e0e0e2;
  256.             }
  257.             .toolbar{
  258.                 line-height: 23px;
  259.             }
  260.             .searchbox{
  261.                 display: flex;
  262.                 flex-grow: 1;
  263.             }
  264.             .toolbar input{
  265.                 flex-grow: 1;
  266.                 border: none;
  267.                 outline: none;
  268.                 font-size: 12px;
  269.                 padding-left: 23px;
  270.                 background-size: 12px;
  271.                 background-repeat: no-repeat;
  272.                 background-position: 7px center;
  273.                 background-image: url(data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljCiAgIC0gTGljZW5zZSwgdi4gMi4wLiBJZiBhIGNvcHkgb2YgdGhlIE1QTCB3YXMgbm90IGRpc3RyaWJ1dGVkIHdpdGggdGhpcwogICAtIGZpbGUsIFlvdSBjYW4gb2J0YWluIG9uZSBhdCBodHRwOi8vbW96aWxsYS5vcmcvTVBMLzIuMC8uIC0tPgo8c3ZnIGZpbGw9InJnYmEoMTM1LCAxMzUsIDEzNywgMC45KSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTIgMTIiPgogIDxwYXRoIGZpbGw9ImNvbnRleHQtZmlsbCIgb3BhY2l0eT0iLjQiIGQ9Ik01IDkuMmwyIDEuNlY2LjFMOC41NSA0aC01LjFMNSA2LjF2My4xeiIvPgogIDxwYXRoIGZpbGw9ImNvbnRleHQtZmlsbCIgZD0iTTEuMTggMi42QTEgMSAwIDAgMSAyIDFIMTBhMSAxIDAgMCAxIC44IDEuNkw4IDYuNHY0LjgyYzAgLjYzLS43Mi45OC0xLjIyLjZsLTIuNS0xLjk5QS43NS43NSAwIDAgMSA0IDkuMjVWNi40MUwxLjE4IDIuNnpNMiAyTDUgNi4wOXYzLjA0bDIgMS41OVY2LjA5TDEwLjAxIDJIMnoiLz4KPC9zdmc+Cg==);
  274.             }
  275.             .clear {
  276.                 flex: 0 0 auto;
  277.                 align-self: center;
  278.                 margin: 0 4px;
  279.                 padding: 0;
  280.                 border: 0;
  281.                 width: 16px;
  282.                 height: 16px;
  283.                 background-color: transparent;
  284.                 background-image: url(data:image/svg+xml;base64,PCEtLSBUaGlzIFNvdXJjZSBDb2RlIEZvcm0gaXMgc3ViamVjdCB0byB0aGUgdGVybXMgb2YgdGhlIE1vemlsbGEgUHVibGljCiAgIC0gTGljZW5zZSwgdi4gMi4wLiBJZiBhIGNvcHkgb2YgdGhlIE1QTCB3YXMgbm90IGRpc3RyaWJ1dGVkIHdpdGggdGhpcwogICAtIGZpbGUsIFlvdSBjYW4gb2J0YWluIG9uZSBhdCBodHRwOi8vbW96aWxsYS5vcmcvTVBMLzIuMC8uIC0tPgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9ImNvbnRleHQtZmlsbCIgZmlsbC1vcGFjaXR5PSJjb250ZXh0LWZpbGwtb3BhY2l0eSI+CiAgPHBhdGggZD0iTTYuNTg2IDhsLTIuMjkzIDIuMjkzYTEgMSAwIDAgMCAxLjQxNCAxLjQxNEw4IDkuNDE0bDIuMjkzIDIuMjkzYTEgMSAwIDAgMCAxLjQxNC0xLjQxNEw5LjQxNCA4bDIuMjkzLTIuMjkzYTEgMSAwIDEgMC0xLjQxNC0xLjQxNEw4IDYuNTg2IDUuNzA3IDQuMjkzYTEgMSAwIDAgMC0xLjQxNCAxLjQxNEw2LjU4NiA4ek04IDBhOCA4IDAgMSAxIDAgMTZBOCA4IDAgMCAxIDggMHoiLz4KPC9zdmc+Cg==);
  285.             }
  286.             .tabs-item{
  287.                 border-top: 2px solid #f3f3f3;
  288.             }
  289.             .tabs-item:hover{
  290.                 background: #e9e9e9;
  291.                 border-top: 2px solid #c3c3c6;
  292.             }
  293.             .tabs-item, .toolbar-item{
  294.                 cursor: pointer;
  295.                 padding: 0 10px;
  296.                 font-size: 12px;
  297.                 
  298.             }
  299.             .tabs-item.active{
  300.                 color: #0060df;
  301.                 border-top: 2px solid #0060df !important;
  302.                 background: #e9e9e9;
  303.             }
  304.  
  305.             .tabs-item:hover, .toolbar-item:hover{
  306.                 background: #e9e9e9;
  307.             }
  308.             /** 工具栏样式 END **/
  309.             /** JSON 格式化样式 START **/
  310.             ul.json-object,
  311.             ul.json-array {
  312.                 list-style-type: none;
  313.                 margin: 0 0 0 2px;
  314.                 border-left: 1px dotted #5D6D7E;
  315.                 padding-left: 24px;
  316.             }
  317.             .json-brackets {
  318.                 font-weight: 700;
  319.             }
  320.             .json-key {
  321.                 /* color: #A31515;*/
  322.                 color: #910F93;
  323.                 cursor: pointer;
  324.             }
  325.             .json-string, .json-string a{
  326.                 /* color: #0b7500;*/
  327.                 color: #4B8A4C;
  328.             }
  329.             .json-number{
  330.                 /* color: #164FF0;*/
  331.                 color: #1a01cc;
  332.                 font-weight: 600;
  333.             }
  334.             .json-boolean{
  335.                 color: #905;
  336.                 font-weight: 600;
  337.             }
  338.             .json-null {
  339.                 /* color: #F1592A;*/
  340.                 color: #0031BC;
  341.                 font-weight: 600;
  342.             }
  343.             a.json-toggle {
  344.                 position: rElative;
  345.                 color: inherit;
  346.                 opacity: 0.2;
  347.                 text-decoration: none;
  348.             }
  349.             a.json-toggle:hover {
  350.                 opacity: 0.35;
  351.             }
  352.             a.json-toggle:active {
  353.                 opacity: 0.5;
  354.             }
  355.             a.json-toggle:focus {
  356.                 outline: none;
  357.             }
  358.             a.json-toggle:before {
  359.                 top: 2.5px;
  360.                 left: -15px;
  361.                 position: absolute;
  362.                 content: "";
  363.                 display: block;
  364.                 width: 0;
  365.                 height: 0;
  366.                 border-style: solid;
  367.                 border-width: 5px 0 5px 8px;
  368.                 border-color: transparent transparent transparent currentColor;
  369.                 transform: rotate(90deg);
  370.             }
  371.             a.json-toggle.collapsed:before {
  372.                 transform: rotate(0deg);
  373.             }
  374.             a.json-placeholder {
  375.                 color: #aaa;
  376.                 font-size: 12px;
  377.                 padding: 0 1em;
  378.                 text-decoration: none;
  379.             }
  380.             a.json-placeholder:hover {
  381.                 text-decoration: underline;
  382.             }
  383.             
  384.             .json-curly-brackets {
  385.                 color: #6D9331;
  386.             }
  387.             .json-square-brackets{
  388.                 color: #8E9331;
  389.             }
  390.             /** 暗黑主题 START **/
  391.             body.dark{
  392.                 background: #333333;
  393.             }
  394.             .dark li, .dark pre{
  395.                 color: #CCC;
  396.             }
  397.             .dark .json-toggle {
  398.                 opacity: 0.35;
  399.             }
  400.             .dark .json-toggle:hover {
  401.                 opacity: 0.5;
  402.             }
  403.             .dark .json-curly-brackets {
  404.                 color: #CE70D6;
  405.             }
  406.             .dark .json-square-brackets{
  407.                 color: #F1D700;
  408.             }
  409.             .dark .json-key {
  410.                 color: #7CDCFE;
  411.             }
  412.             .dark .json-string, .dark .json-string a{
  413.                 color: #CE9178;
  414.             }
  415.             .dark .json-number{
  416.                 color: #B5CEA8;
  417.             }
  418.             .dark .json-boolean{
  419.                 color: #569CD6;
  420.             }
  421.             .dark .json-null {
  422.                 color: #2D7AD6;
  423.             }
  424.             .dark jmnode {
  425.                 color: #7CDCFE !important;
  426.             }
  427.             /** 暗黑主题 END **/
  428.             /** JSON 格式化样式 END **/
  429.             /** 脑图样式 START **/
  430.             #jmContainer{
  431.                 width: 100vw; 
  432.                 height: calc(100vh - 57px);
  433.                 /* background:#F7F7F7 */
  434.             }
  435.             jmnode{
  436.                 display: flex;
  437.                 align-items: center;
  438.                 padding: 0 7px 0 22px;
  439.             }
  440.             jmnode{
  441.                 color: #475872 !important;
  442.                 box-shadow: none !important;
  443.                 background-color: transparent !important;
  444.             }
  445.             jmnode:hover{
  446.                 text-shadow: 1px 1px 1px currentColor;
  447.             }
  448.             jmnode.root {
  449.                 padding: 0;
  450.                 color: transparent !important;
  451.             }
  452.             jmnode:not(.root)::before, jmnode.root::before{
  453.                 content: " ";
  454.                 top: 50%;
  455.                 position: absolute;
  456.                 border-radius: 50%;
  457.                 transform: translateY(-50%);
  458.             }
  459.             jmnode:not(.root)::before{
  460.                 left: 0;
  461.                 width: 15px;
  462.                 height: 15px;
  463.                 background: rgba(${rgbaColor}, 0.5);
  464.             }
  465.             jmnode.root::before{
  466.                 left: 50%;
  467.                 width: 18px;
  468.                 height: 18px;
  469.                 transform: translate(-18px, -50%);
  470.                 background: rgba(${rgbaColor}, 0.7);
  471.             }
  472.             jmexpander{
  473.                 margin-top: 1px;
  474.                 line-height: 9px;
  475.                 background: #dfdfdf;
  476.             }
  477.             .mind-array{
  478.                 opacity: 0.5;
  479.                 font-size: 12px;
  480.                 padding-left: 5px;
  481.             }
  482.             /** 脑图样式 END **/
  483.             /** 容器样式 START **/
  484.             .tabs-container{
  485.                 overflow: auto;
  486.                 line-height: 1.5;
  487.                 font-family: monospace;
  488.             }
  489.             .tabs-container > div{
  490.                 display: none;
  491.             }
  492.             .tabs-container > div.active{
  493.                 display: block;
  494.             }
  495.             .tabs-container #formatContainer{
  496.                 padding: 10px;
  497.             }
  498.             .tabs-container #rawTextContainer{
  499.                 padding: 0 10px;
  500.             }
  501.             .tabs-container #rawTextContainer pre{
  502.                 display: block !important;
  503.                 overflow-wrap: break-word;
  504.                 white-space: pre-wrap;
  505.             }
  506.             /** 容器样式 END **/
  507.             
  508.             .layui-layer-tips{
  509.                 width: auto !important;
  510.             }
  511.             .tabs .theme{
  512.                 right: 60px;
  513.                 position: absolute;
  514.             }
  515.         `)
  516.  
  517.         source.hide()
  518.         // 将内容用eval函数处理下
  519.         const jsonObject = eval(`(${rawText})`);
  520.  
  521.         $("body").addClass('dark').append(`
  522.         <div class="scroll-top"></div>
  523.         <div class="flex-container">
  524.             <div class="panel">
  525.                 <div class="tabs">
  526.                     <div class="tabs-item btn active" id="format">JSON格式化</div>
  527.                     <div class="tabs-item btn" id="viewJsonMind">JSON脑图</div>
  528.                     <div class="tabs-item btn" id="viewRawText">原始数据</div>
  529.                     <div class="theme">
  530.                         <label>主题: </label>
  531.                         <select>
  532.                             <option value="default">默认</option>
  533.                             <option value="dark">暗黑</option>
  534.                         </select>
  535.                     </div>
  536.                 </div>
  537.                 <div class="toolbar">
  538.                     <div class="toolbar-item btn" id="saveJson">保存</div>
  539.                     <div class="toolbar-item btn" id="copyJson">复制</div>
  540.                     <div class="toolbar-item btn" id="collapseAll">全部折叠</div>
  541.                     <div class="toolbar-item btn" id="expandAll">全部展开</div>
  542.                     <div class="toolbar-item btn" id="beautify" style="display: none">美化输出</div>
  543.                     <div class="searchbox">
  544.                         <input type="text" placeholder="过滤 JSON "/>
  545.                         <button class="clear" hidden></button>
  546.                     </div>
  547.                 </div>
  548.             </div>
  549.             <div class="tabs-container">
  550.                 <div class="active" id="formatContainer"></div>
  551.                 <div id="jmContainer"></div>
  552.                 <div id="rawTextContainer"><pre></pre></div>
  553.             </div>
  554.         </div>`) 
  555.  
  556.         let btnEvent = {
  557.             isFormater: false,
  558.             $rawText: $('#rawTextContainer'),
  559.             /**
  560.              * 保存为文件
  561.              */
  562.             download: {
  563.                 download: function(content, filename) {
  564.                     const link = document.createElement("a")
  565.                     link.href = content
  566.                     link.download = filename
  567.                     link.click()
  568.                 },
  569.                 saveJSON: function (text) {
  570.                     // 创建一个 Blob 对象，包含要下载的文本内容
  571.                     const blob = new Blob([text], { type: "text/plain;charset=utf-8" });
  572.                     const url = URL.createObjectURL(blob)
  573.                     let filename = new Date().getTime() + '.json';
  574.                     this.download(url, filename)
  575.                     URL.revokeObjectURL(url);
  576.                 },
  577.                 savePNG: () => jm.shoot(),
  578.             },
  579.             saveJson:function(){
  580.                 if($('#jmContainer').is(':visible')){
  581.                     this.download.savePNG()
  582.                 }else{
  583.                     this.download.saveJSON(this.$rawText.text())
  584.                 }
  585.             },
  586.             // 复制JSON文本内容
  587.             copyJson: function(){
  588.                 GM_setClipboard(this.$rawText.text())
  589.                 layer.msg('复制成功', {time: 1500})
  590.             },
  591.             // 全部折叠
  592.             collapseAll: function(){
  593.                 if($('#formatContainer').is(':visible')){
  594.                     try{
  595.                         $('.json-toggle').not('.collapsed').click()
  596.                     }catch(e){}
  597.                 }else{
  598.                     jm.collapse_all()
  599.                 }
  600.             },
  601.             // 全部展开
  602.             expandAll: function(){
  603.                 if($('#formatContainer').is(':visible')){
  604.                     try{
  605.                         $('a.json-placeholder').click().remove()
  606.                     }catch(e){}
  607.                 }else{
  608.                     jm.expand_all()
  609.                     jm.scroll_node_to_center(jm.get_root())
  610.                 }
  611.             },
  612.             format: function(){},
  613.             // 显示JSON脑图
  614.             viewJsonMind: function(){},
  615.             // 查看原始JSON内容
  616.             viewRawText: function(){
  617.                 this.$rawText.html(source.clone())
  618.             },
  619.             // 美化
  620.             beautify: function(){
  621.                 this.isFormater = !this.isFormater
  622.                 if(this.isFormater){
  623.                     this.$rawText.find('pre').text(JSON.stringify(jsonObject, null, 2))
  624.                 }else{
  625.                     this.viewRawText()
  626.                 }
  627.             },
  628.             init: function(){
  629.                 this.viewRawText()
  630.  
  631.                 // 按钮点击事件
  632.                 $('.btn').click(e => {
  633.                     const target = e.target, id = target.id
  634.                     if(target.classList.contains('tabs-item')){
  635.                         let index = $(target).index()
  636.                         $(target).addClass('active').siblings().removeClass("active")
  637.                         $('.tabs-container > div').removeClass("active").eq(index).addClass('active')
  638.  
  639.                         let beautifyEl = $('#beautify'), 
  640.                             searchEl= $('.searchbox'),
  641.                             copyJsonEl= $('#copyJson'),
  642.                             aEl = $('#collapseAll, #expandAll')
  643.                         id === 'format' ? searchEl.show(): searchEl.hide()
  644.                         id === 'viewJsonMind' ? copyJsonEl.hide(): copyJsonEl.show()
  645.                         id === 'viewRawText' ? (beautifyEl.show() && aEl.hide()) : (beautifyEl.hide() && aEl.show())
  646.                     }
  647.                     this[id](target)
  648.                 })
  649.  
  650.                 return this
  651.             }
  652.         },
  653.         jsonMind = {
  654.             // JSON数据转换为jsMind所需要的数据结构
  655.             convert: function(json){
  656.                 let children = []
  657.                 if(typeof json === 'object'){
  658.                     for(let key in json){
  659.                         let val = json[key], 
  660.                             isArray = Array.isArray(val)
  661.  
  662.                         children.push({
  663.                             isArray,
  664.                             chain: key,
  665.                             id: key + '_' + Math.random(),
  666.                             topic: isArray ? `${key}<span class="mind-array">[${val.length}]</span>` : `${key}`,
  667.                             // children: this.convert(val)
  668.                             children: isArray ? this.convert(val[0]) : this.convert(val)
  669.                         })
  670.                     }
  671.                 }
  672.                 return children;
  673.             },
  674.             // 脑图节点调用链
  675.             mindChain: function (node){
  676.                 let chain = node.data.chain
  677.                 if(!node.parent){
  678.                     return chain
  679.                 }
  680.  
  681.                 let parent = node.parent, parentChain = this.mindChain(parent)
  682.                 chain = parent.data.isArray ? `${parentChain}[0].${chain}` : `${parentChain}.${chain}`
  683.                 return chain
  684.             },
  685.             //  显示脑图
  686.             show: function(json, isArr){
  687.                 jm.show({
  688.                     "meta":{
  689.                         "name":"JSON脑图",
  690.                         "author":"1220301855@qq.com",
  691.                         "version":"1.0"
  692.                     },
  693.                     "format":"node_tree",
  694.                     /* 数据内容 */
  695.                     "data": {
  696.                         "id": "root",
  697.                         "topic": 'Response',
  698.                         "direction": "left",
  699.                         "children": this.convert(json),
  700.                         "chain": isArr ? 'Response[0]' : 'Response'
  701.                     }
  702.                 })
  703.  
  704.                 setTimeout(() => jm.scroll_node_to_center(jm.get_root()), 300)
  705.                 return this
  706.             },
  707.             // 脑图节点事件
  708.             event:function(){
  709.                 $("jmnode").on('dblclick mouseover mouseout', function(event){
  710.                     let that = $(this), node = jm.get_node(that.attr('nodeid'))
  711.                     if(!node.parent){
  712.                         return
  713.                     }
  714.  
  715.                     switch(event.type){
  716.                         case 'dblclick':
  717.                             GM_setClipboard(jsonMind.mindChain(node))
  718.                             layer.msg('节点路径复制成功', {time: 1500})
  719.                             break;
  720.                         case 'mouseover':
  721.                             let s = `<b>节点路径（双击复制）</b><br/>${jsonMind.mindChain(node)}`
  722.                             layer.tips(s, that, {
  723.                                 time: 0,
  724.                                 tips: [2, '#1e2732']
  725.                             });
  726.                             break;
  727.                         default:
  728.                             layer.closeAll()
  729.                             break;
  730.                     }
  731.                 })
  732.                 return this
  733.             },
  734.             collapseOrExpand: function(){
  735.                 $("jmnode").on('click', function(){
  736.                     let node = jm.get_node($(this).attr('nodeid'))
  737.                     jm.toggle_node(node)
  738.                 })
  739.                 return this
  740.             },
  741.             init: function(json){
  742.                 let isArr = Array.isArray(json);
  743.                 if(isArr){
  744.                     if(typeof json[0] !== 'object'){
  745.                         layer.msg('数据结构无法生成脑图', {time: 1000})
  746.                         return
  747.                     }
  748.                     json = json[0]
  749.                 }
  750.  
  751.                 if(!window.jm){
  752.                     window.jm = new jsMind({
  753.                         mode :'side', 
  754.                         editable: false,
  755.                         container:'jmContainer',
  756.                         view: {
  757.                             hmargin: 50, // 思维导图距容器外框的最小水平距离
  758.                             vmargin: 50,  // 思维导图距容器外框的最小垂直距离
  759.                             engine: 'svg', // 思维导图各节点之间线条的绘制引擎
  760.                             draggable: true, // 当容器不能完全容纳思维导图时，是否允许拖动画布代替鼠标滚动
  761.                             support_html : false, 
  762.                             line_color: '#C4C9D0',
  763.                         },
  764.                         layout: {
  765.                             vspace: 7, // 节点之间的垂直间距
  766.                             hspace: 150, // 节点之间的水平空间
  767.                         },
  768.                     });
  769.                 }
  770.  
  771.                 this.show(json, isArr).event().collapseOrExpand()
  772.             }
  773.         },
  774.         otherOperate = {
  775.             // 过滤 JSON
  776.             filterJSON: function(filter) {
  777.                 if(!filter){
  778.                     $('#formatContainer li').removeClass('hidden')
  779.                     return
  780.                 }
  781.  
  782.                 let chainSet= new Set()
  783.                 /**
  784.                  * 模糊匹配 JSON key
  785.                  * 假如`filter`值为`id`, querySelectorAll得到DOM节点
  786.                  * 得到：['.feedList.0.images.0.user_id', '.feedList.0.images.0', '.feedList.0.images', '.feedList.0', '.feedList']
  787.                  */
  788.                 document.querySelectorAll('#formatContainer *[json-path]').forEach(el => {
  789.                     let chain = $(el).attr('json-path')
  790.                     if(!chain){
  791.                         return
  792.                     }
  793.                     let newChain = chain.substr(chain.lastIndexOf('.'))
  794.                     if(!newChain.toLowerCase().includes(filter.toLowerCase())){
  795.                         return
  796.                     }
  797.                     chainSet.add(chain)
  798.                     while(chain = chain.substr(0, chain.lastIndexOf('.'))){
  799.                         chainSet.add(chain)
  800.                     }
  801.                 })
  802.  
  803.                 /**
  804.                  * 模糊匹配 JSON value
  805.                  */
  806.                 document.querySelectorAll("#formatContainer *[class*='json-']:not([class*='json-key']):not([class*='json-brackets'])")
  807.                 .forEach(el =>{
  808.                     let target = $(el), 
  809.                         chain = target.parent().attr('json-path')
  810.                     if(!chain){
  811.                         return
  812.                     }
  813.                     let text = target.text()
  814.                     if(!text.toLowerCase().includes(filter.toLowerCase())){
  815.                         return
  816.                     }
  817.                     chainSet.add(chain)
  818.                     while(chain = chain.substr(0, chain.lastIndexOf('.'))){
  819.                         chainSet.add(chain)
  820.                     }
  821.                 })
  822.  
  823.                 $('#formatContainer li').addClass('hidden')
  824.                 chainSet.forEach(chain => {
  825.                     $(`#formatContainer *[json-path="${chain}"]`).removeClass('hidden')
  826.                 })
  827.             },
  828.             // JSON 过滤
  829.             input: function(){
  830.                 let that = this
  831.                 $('input').on('input', function(){
  832.                     let val = $(this).val()
  833.                     val === '' ? $('.clear').attr('hidden', true) : $('.clear').attr('hidden', false)
  834.                     that.filterJSON(val)
  835.                 })
  836.                 return that
  837.             },
  838.             // 清空输入框内容
  839.             clear: function(){
  840.                 let that = this
  841.                 $('.clear').click(function(){
  842.                     that.filterJSON()
  843.                     $('input').val('')
  844.                     $(this).attr('hidden', true)
  845.                 })
  846.                 return this
  847.             },
  848.             // 返回顶部
  849.             scrollTop: function(){
  850.                 $('.scroll-top').click(function(){
  851.                     $('.tabs-container').animate({
  852.                         scrollTop: '0'
  853.                     }, 1000);
  854.                 })
  855.                 return this
  856.             },
  857.             // 所有a标签，看是否是图片，是图片生成预览图  
  858.             urlHover:function(){
  859.                 $("a.json-string[href]").hover(function(){
  860.                     var that = $(this), 
  861.                         href = that.attr('href')
  862.                     if(Utils.isImg(href)){
  863.                         layer.tips(`<img src="${href}" />`, that, {
  864.                             time: 0,
  865.                             anim: 5,
  866.                             maxWidth: 500,
  867.                             tips: [3, '#d9d9d9']
  868.                         });
  869.                     }
  870.                 }, () => layer.closeAll())
  871.                 return this
  872.             },
  873.             // 提示key的JSONPath
  874.             tipsJsonPath: function(){
  875.                 var that = this
  876.                 $(".json-key").hover(function(){
  877.                     let jsonPath = that.getJsonPath(this)
  878.                     layer.tips(jsonPath, this, {
  879.                         time: 0,
  880.                         anim: 5,
  881.                         maxWidth: 500,
  882.                         tips: [1, '#1e2732']
  883.                     })
  884.                 }, () => layer.closeAll())
  885.                 return this
  886.             },
  887.             // 单击key复制JSONPath
  888.             copyJsonPath: function(){
  889.                 var that = this
  890.                 $(".json-key").click(function(){
  891.                     let jsonPath = that.getJsonPath(this)
  892.                     GM_setClipboard(jsonPath)
  893.                     layer.msg('复制成功', {time: 1500})
  894.                 })
  895.                 return this
  896.             },
  897.             getJsonPath: function(element){
  898.                 let jsonPath = $(element).parent().attr('json-path')
  899.                 return jsonPath.split('.').reduce((prev, next) => /^\d+$/.test(next) ? prev + `[${next}]` : prev + '.' + next)
  900.             },
  901.             init:function(){
  902.                 this.input().clear().scrollTop().urlHover().tipsJsonPath().copyJsonPath()
  903.             }
  904.         },
  905.         theme = {
  906.             // 切换主题
  907.             changeTheme: function(){
  908.                 let that = this
  909.                 $('.theme select').change(function(e){
  910.                     let val = $(e.target).val()
  911.                     GM_setValue('theme', val)
  912.                     that.setTheme()
  913.                 })
  914.                 return this
  915.             },
  916.             // 设置主题
  917.             setTheme: function(){
  918.                 let theme = GM_getValue('theme') || 'default'
  919.                 $('body').removeClass().addClass(theme)
  920.                 $('.theme select').val(theme)
  921.                 return this
  922.             },
  923.             init:function(){
  924.                 this.setTheme().changeTheme()
  925.             }
  926.         }
  927.  
  928.         $('#formatContainer').jsonViewer(jsonObject, jsonpFun)
  929.         theme.init()
  930.         btnEvent.init()
  931.         otherOperate.init()
  932.         jsonMind.init(jsonObject)
  933.     })(_jQuery)
  934. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址