JSON格式化、高亮库JSONFORMATER

这是一个基于jQuery的JSON格式化及高亮显示库,支持展开收起功能,适用于前端开发者进行JSON数据的可视化处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基于jQuery的json格式化、高亮库

核心代码参考天马行空工作室,本人只做了模块化和一些代码优化。

demo

http://leo108.github.io/jsonFormater/

github地址

https://github.com/leo108/jsonFormater

使用方式

引入jQuery

1 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

注意:jQuery版本要求>=1.7.2

引入jsonFormater.js和jsonFormater.css

1 <script type="text/javascript" src="jsonFormater.js"></script>
2 <link href="jsonFormater.css" type="text/css" rel="stylesheet"/>

在html中新增一个空的元素作为显示的容器

例如<div id='container'></div>

调用JsonFormater

1 $(document).ready(function(){
2     var options = {
3         dom : '#container' //对应容器的css选择器
4     };
5     var jf = new JsonFormater(options); //创建对象
6     jf.doFormat('{"string":"leo108"}'); //格式化json
7 });

效果图

效果图

详细使用方式

配置

支持的配置以及默认配置如下:

1 {
2     dom: '',          //用于放置的dom的选择器
3     singleTab: "  ",  //单个tab
4     tabSize: 2,       //缩进数量
5     quoteKeys: true,  //key是否用双引号包含
6     imgCollapsed: "images/Collapsed.gif"//收起的图片路径
7     imgExpanded: "images/Expanded.gif",  //展开的图片路径
8     isCollapsible: true //是否支持展开收起
9 }

方法

1 var obj = new JsonFormater({dom: '#container'});
2 obj.doFormat(json) //格式化一个json字符串或者js对象
3 obj.expandAll()    //全部展开
4 obj.collapseAll()  //全部收起
5 obj.collapseLevel(level)  //展开到level层
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值