javascript格式化json显示实例分析


Posted in Javascript onApril 21, 2015

本文实例讲述了javascript格式化json显示方法。分享给大家供大家参考。具体分析如下:

将json对象或者json字符串格式化方便在网页上限制

var formatJson = function(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;
};

关于json格式化感兴趣的朋友还可参考在线工具:

JSON代码工具

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
vue移动端屏幕适配详解
Apr 30 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
JavaScript执行机制详细介绍
Dec 06 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 #Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 #Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 #Javascript
javascript格式化指定日期对象的方法
Apr 21 #Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 #Javascript
javascript判断数组内是否重复的方法
Apr 21 #Javascript
jQuery菜单插件superfish使用指南
Apr 21 #Javascript
You might like
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
儿童生日会策划方案
2014/05/15 职场文书
相亲大会策划方案
2014/06/05 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
团组织推优材料
2014/12/29 职场文书
2015年人事科工作总结
2015/04/28 职场文书
报案材料怎么写
2015/05/25 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
Python图像处理库PIL详细使用说明
2022/04/06 Python
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python