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 相关文章推荐
JavaScript Prototype对象
Jan 07 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
Vue开发环境跨域访问问题
Jan 22 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
JavaScript实现表单验证功能
Dec 09 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
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
php strcmp使用说明
2010/04/22 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
javascript 自定义事件初探
2009/08/21 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
gearman的安装启动及python API使用实例
2014/07/08 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
python list的index()和find()的实现
2020/11/16 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
PHP面试题集
2016/12/18 面试题
毕业生求职简历的自我评价
2013/10/07 职场文书
技术总监管理职责范本
2014/03/06 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
Pandas 稀疏数据结构的实现
2021/07/25 Python