html json 折叠效果,格式化json、html展示json数据-程序员宅基地

技术标签: html json 折叠效果  

记录一下

function formatJson(json, options) {

var reg = null,

formatted = '',

pad = 0,

PADDING = ' '; // one can also use '\t' or a different number of spaces

// optional settings

options = options || {};

// remove newline where '{' or '[' follows ':'

options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;

// use a space after a colon

options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;

// begin formatting...

if (typeof json !== 'string') {

// make sure we start with the JSON as a string

json = JSON.stringify(json);

} else {

// is already a string, so parse and re-stringify in order to remove extra whitespace

json = JSON.parse(json);

json = JSON.stringify(json);

}

// add newline before and after curly braces

reg = /([\{\}])/g;

json = json.replace(reg, '\r\n$1\r\n');

// add newline before and after square brackets

reg = /([\[\]])/g;

json = json.replace(reg, '\r\n$1\r\n');

// add newline after comma

reg = /(\,)/g;

json = json.replace(reg, '$1\r\n');

// remove multiple newlines

reg = /(\r\n\r\n)/g;

json = json.replace(reg, '\r\n');

// remove newlines before commas

reg = /\r\n\,/g;

json = json.replace(reg, ',');

// optional formatting...

if (!options.newlineAfterColonIfBeforeBraceOrBracket) {

reg = /\:\r\n\{/g;

json = json.replace(reg, ':{');

reg = /\:\r\n\[/g;

json = json.replace(reg, ':[');

}

if (options.spaceAfterColon) {

reg = /\:/g;

json = json.replace(reg, ':');

}

$.each(json.split('\r\n'), function (index, node) {

var i = 0,

indent = 0,

padding = '';

if (node.match(/\{$/) || node.match(/\[$/)) {

indent = 1;

} else if (node.match(/\}/) || node.match(/\]/)) {

if (pad !== 0) {

pad -= 1;

}

} else {

indent = 0;

}

for (i = 0; i < pad; i++) {

padding += PADDING;

}

formatted += padding + node + '\r\n';

pad += indent;

});

return formatted;

}

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_33520849/article/details/117758574

智能推荐

MySql报错only_full_group_by的解决办法-程序员宅基地

文章浏览阅读1.4k次。前段时间我在一个新环境里部署程序时遇到MySql报错only_full_group_by,之前已经遇到过一次同样的问题,当时没有总结经验,导致这次解决时耗费了不少时间,这里把本次的处理过程进行记录总结,同时分享给大家MySql数据库报错如下,从字面意思理解是select后面查询的字段没有出现在group by中com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException:Expression #2 of SELECT list is not in _mysql报错only_full_group_by的解决办法

ubuntu中idea无法进行中文输入_idea 中文输入 xubuntu-程序员宅基地

文章浏览阅读695次。unbunt中idea无法进行中文输入[????????????这一段都是废话,只是表达自己崩溃的情绪,大家可以直接忽略] 这个问题费了自己很长的时间,看了很多博客,按照博客上的许多方法都无法进行解决,快崩溃了。正准备把输入法换了,去卸载ibus的时候,看到有人说最好不要卸载,可能会导致 ubuntu_desktop的奔溃。这个提醒让我自己放弃了这个决定。便也思考,会不会是自己unbunt和idea所对应的版本_idea 中文输入 xubuntu

fatal error LNK1120: 2 unresolved externals解决办法-程序员宅基地

文章浏览阅读4.7k次。典型的错误提示有: libcmtd.lib(crt0.obj) : error LNK2001: unresolved external symbol _main LIBCD.lib(wincrt0.obj) : error LNK2001: unresolved external symbol _WinMain@16 msvcrtd.lib(crtexew.obj) _fatal error lnk1120: 2 unresolved externals

3D游戏建模:吹爆“寡姐”的神仙颜值,你也能轻松上手 | 欣赏-程序员宅基地

文章浏览阅读237次。就问问各位《复仇者联盟》《惊奇队长》《黑寡妇》《超体》这些耳熟能详的电影绝对是部部必看!“寡姐”斯嘉丽·约翰逊是咱们最熟悉的漫威女演员之一“寡姐”的神仙颜值绝对征服了不少的人包括奶茶在内也是爱的不要不要的今天就给大家分享一个斯嘉丽·约翰逊的模型▼▼▼毛发是 XGEN2.0,头发造型虽然只做了一层但看起来越来越像神奇女侠有木有皮肤贴图是Mari4.2v1,Arnold渲染器细节之处处理的非常到位尤其是眼神和皮肤的处理非常细致其实头发在处理上

PO、BO、VO、POJO、DTO(TO)、DAO的区别_bo和vo和to的区别-程序员宅基地

文章浏览阅读768次。PO(persistent object 持久对象)有时也被称为Data对象,对应数据库中的entity,可以简单认为一个PO对应数据库中的一条记录。在hibernate持久化框架中与insert/delet操作密切相关。PO中不应该包含任何对数据库的操作。BO(business object 业务对象)业务对象主要作用是把业务逻辑封装为一个对象。这个对象可以包括一个或多个其它的对象。比如一个简历,有教育经历、工作经历、社会关系等等。我们可以把教育经历对应一个PO,工作经历对应一_bo和vo和to的区别

2024年短剧项目怎么做?教你搭建自己的短剧及cps分销平台app小程序v_快手短剧分销平台怎么搭建的呢-程序员宅基地

文章浏览阅读924次,点赞29次,收藏8次。功能:1.对接流量主变现2.影视作品观看3.支持创作者入驻4.PC独立后台管理5.壁纸,表情包下载6.内容管理分类,专题分类7.可单次付费或月会员8.会员开通与支付功能9.微信端使用10.后台数据清晰明11.可定制搭建。介绍:短剧小程序,是自己在后台上传片源,用户充值和看剧一些操作都是在你自己的小程序上进行。以上就是三款短剧系统的介绍,如果想在2024年入局短剧行业 ,可联系:丸子图社 找客服联系搭建即可。前言:短剧系统分为三种:短剧系统、短剧cps分销平台、海外短剧系统。功能:1、支持短剧,小说挂载。_快手短剧分销平台怎么搭建的呢

随便推点

网络服务(4)——以太网配置IP、网关_ifconfig配置ip和网关-程序员宅基地

文章浏览阅读5.6k次,点赞2次,收藏13次。buildroot/etc/network/interfaces自动分配IPauto eth0iface eth0 inet dhcp(当前使用的系统在配置了dhcp之后,如果获取不到IP,会影响到桌面显示)静态IPauto eth0iface eth0 inet staticaddress 192.168.0.232gateway 192.168.0.1netmask 255.255.255.0patchdiff --git a/buildroot/package/ifup_ifconfig配置ip和网关

利用html和css实现常见的布局_parent{display:flex;align-content:center}-程序员宅基地

文章浏览阅读233次。转载来源:https://segmentfault.com/a/1190000003931851单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父_parent{display:flex;align-content:center}

什么是水平分表,垂直分表_水平分表和垂直分表-程序员宅基地

文章浏览阅读412次。水平分表把一个大表,拆分成多个小表,大表和小表的字段完全一致,只是小表的数据加一起才是大表的数据(如大表的资料有三个月的人员刷卡资料。小表分别会存一个月的刷卡资料)垂直分表把一个大表,拆分成多个小表。小表的字段总和(除id)等同于大表字段例如:大表字段为id,empno,chname,sex,age,dept则小表1的字段为id,empno,chname,dept小表2的字段为id,empno,sex,age..._水平分表和垂直分表

jmeter函数助手对话框 随机数、字符和时间戳,判断变量是否存在_jmeter获取随机时间撮-程序员宅基地

文章浏览阅读1.9w次,点赞6次,收藏13次。函数助手对话框打开位置2处默认界面点击帮助左边的倒钩三角形,选择所需要的函数Random函数创建${__Random(9000,9999,data)}Random函数使用和csv文件正则提取一样结果Random String函数使用Random string length:随机字符串长度Chars to use for random string generation:用于随机生成字符串的字符Random String函数使用${__RandomString(7,abc1_jmeter获取随机时间撮

如何通过CRM实现客户关系管理?-程序员宅基地

文章浏览阅读879次,点赞19次,收藏20次。数字化转型已经成为了企业发展的重要方向,然而数字化转型不仅仅是把线下搬到线上,更重要的是,真正的数字化转型应该以客户的连接和客户的数字化作为突破口。从“以产品为中心”到“以客户为中心”的转变,让客户成为了企业最重要的战略资源之一。CRM通过整合企业营销、销售、服务等业务为一体的企业商业经营策略,可以实现:有效组织企业资源培养以客户为中心的经营行为实施以客户为中心的业务流程……

双目视觉算法研究(二)相机模型和直接线性法(DLT)_dlt模型-程序员宅基地

文章浏览阅读1.5w次,点赞18次,收藏99次。一、相机数学模型 相机模型为以后一切标定算法的关键,只有这边有相当透彻的理解,对以后的标定算法才能有更好的理解。本人研究了好长时间,几乎每天都重复看几遍,最终才会明白其推导过程。 我觉得首先我们要理解相机模型中的四个平面坐标系的关系:像素平面坐标系(u,v)、像平面坐标系(图像物理坐标第(x,y)、相机坐标系(Xc,Yc,Zc)和世界坐标系(Xw,Yw,Zw),在每一篇介绍相_dlt模型