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

智能推荐

java计算机毕业设计课程答疑系统源程序+mysql+系统+lw文档+远程调试_一梵程序-程序员宅基地

文章浏览阅读92次。java计算机毕业设计课程答疑系统源程序+mysql+系统+lw文档+远程调试。前端技术:Layui、HTML、CSS、JS、JQuery等技术。ssm基于SSM+VUE技术的小区车辆档案车位管理系统设计与实现。springboot基于SpringBoot的自助旅游导航系统。springboot基于springboot的社会公益平台。JSP+sql图书管理系统(源程序+论文+数据库+录像)ssm+sqlserver海城同泽中学图书仓库管理系统。ssm+sqlserver长大工院竞赛系统。_一梵程序

java 16.数组-程序员宅基地

文章浏览阅读80次。数组数组元素数组是一种最简单的复合数据类型,它是有序数据的集合,数组中的每个元素具有相同的数据类型,可以用一个统一的数组名和不同的下标来唯一确定数组中的元素。根据数组的维度,可以将其分为一维数组、二维数组和多维数组等。总的来说,数组具有以下特点:数组可以是一维数组、二维数组或多维数组。数值数组元素的默认值为 0,而引用元素的默认值为 null。交错数组是数组的数组,..._java数组16

vue 3.0中设置网页title_vue3设置title-程序员宅基地

文章浏览阅读2.7k次,点赞2次,收藏2次。(1)main.js创建自定义指令。(2)vue页面中使用。_vue3设置title

python爬虫遇到中文乱码问题(ISO-8859-1)_python 乱码 ò ¢-程序员宅基地

文章浏览阅读4.6k次,点赞4次,收藏12次。python爬虫遇到中文乱码(ISO-8859-1)直接入正题,今天爬虫遇到中文乱码问题,具体大概如下:ÕбêÈË»òÆäÕбê´úÀí»ú¹¹Ó¦µ±¶ÔÆäÌá¹µÄÕб깫¸æµÄÕæʵÐÔ¡¢×¼È·ÐÔ¡¢ºÏ·¨ÐÔ¸ºÔð¡£(这种的字符)找问题所在,首先查看response的编码问题response = request.get(url,headers)print(response.encoding)输出内容:这就好办了,直接编码解码(使用utf_python 乱码 ò ¢

5G NR 定时提前:从协议信令到算法实现 (2)_5g 时间提前量-程序员宅基地

文章浏览阅读6.3k次,点赞4次,收藏48次。【声明】:本文为原创文章,发表于wingsofsilence的程序员宅基地。欢迎转载,但请务必保留本信息,注明文章出处。 本文作者: wingsofsilence 本文原始地址:http://blog.csdn.net/wingsofsilence/article/details/79356236第三部分: TA值测量的方式TA估计算法 1) PRACH 信道在初始接入过程中,T..._5g 时间提前量

【genius_platform软件平台开发】第七十二讲:linux系统驱动开发之-patchelf修改动态库链接器的方法-程序员宅基地

文章浏览阅读2.7k次。1.2 运行运行 patchelf -h 能够得到如下信息:从上面的功能描述中可以看到,patchelf 的主要功能与动态库解析器、rpath、动态库本身相关,可能在解决一些动态库链接程序执行的问题时能够用到。1.3 应用-使用自定义的动态库目录 修改 以使用中的动态库, 的翻译 这篇文章中翻译了 ld.so 动态库链接器执行的过程,其中查找动态库的步骤如下:2. 同名动态库修改应用在应用的开发过程中,在进行多部门合作开发是,大家都会使用第三方库,经常会出现同一个库,不同的版本产_patchelf

随便推点

Matlab 仿真——直流电机速度控制(1)直流电机建模_直流电机系统建模matlab-程序员宅基地

文章浏览阅读2.2w次,点赞31次,收藏228次。Matlab 仿真——直流电机速度控制(1)直流电机建模(搬运自:https://ctms.engin.umich.edu/CTMS/index.php?example=MotorSpeed&section=SystemModeling)该系列我们学习如何对直流电机进行速度控制物理模型一个直流电机模型如下所示:为了简化讨论,假设转子和转轴都是刚体,转子受到的磁场恒定,转子受到的摩擦为粘性摩擦,即受到的摩擦力与速度成正比。假设该电机的物理参数为:(J) 转子的转动惯量 _直流电机系统建模matlab

震惊!国内常见的14款低代码平台-程序员宅基地

文章浏览阅读2.1k次。Astro轻应用(Astro Zero,简称AstroZero)是零代码和低代码应用开发平台,源于华为应用开发和数字化转型的实践,提供了云上无码化、低码化、支持多码化的应用开发模式,屏蔽了技术的复杂性,提升了企业开发的效率。开放和透明,低代码平台最大的风险是技术锁定和黑盒,作为开发者我们自己也不喜欢封闭的低代码平台,因此爱速搭重视开放性,前端方面渲染器开源了,后端方面也选择了开发人员最熟悉的传统数据库技术,没有中间层,对开发者是透明的,并且爱速搭后端不依赖任何云厂商,可以部署到任意环境。_低代码平台

Vue基础——常用指令_vue中可以用什么代替innerhtml-程序员宅基地

文章浏览阅读2.6k次,点赞2次,收藏2次。Vue基础——常用指令指令:Vue的指令是以v-开头的,作用于页面中的元素,所以需要将指令绑定与元素中,从而达到给绑定的元素添加行为的目的。​ 语法:<元素标签 v-指令 = “表达式”>1.v-text和v-html​ v-text 和v-html作用相近,都是更新元素的中的内容,可以理解为innertext和innerHTML,而不能一味的滥用这两个指令 ,如果需要更新的只是部分的元素则应该使用的是双大括号的插值:{{value}}。另外 v-_vue中可以用什么代替innerhtml

PYQT5笔记 011 :文件读取QFileDialog_qfiledialog如何读取多个文件-程序员宅基地

文章浏览阅读503次。QFileDialog提供了一个对话框,允许用户选择文件或目录。imgName, imgType = QFileDialog.getOpenFileName(None, "打开文件", "", "*.jpg;;*.png;;All Files(*)")[官方连接](https://doc.qt.io/qt-5/qfiledialog.html)_qfiledialog如何读取多个文件

Hadoop2.0 QJM方式的HA的配置-程序员宅基地

文章浏览阅读61次。日期:2014-05-03 来源:Linux社区本文在《Hadoop2.0的安装和基本配置》(见http://www.linuxidc.com/Linux/2014-05/101173.htm)一文的基础上继续介绍hadoop2.0 QJM(Quorum Journal Manager)方式的HA的配置(hadoop2..._hadoop qjm配置

Jquery如何获取ASP.NET服务器控件的值-程序员宅基地

文章浏览阅读197次。关键字: Jquery 服务器控件 获取值由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,总结有以下3种方法:服务器控件代码:<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox>1. $("#<%=txtUserID...._jquery 获取服务器控件点击事件