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 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
使用Vue实现一个树组件的示例
Nov 06 Javascript
浅谈react路由传参的几种方式
Mar 23 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
PHP5+UTF8多文件上传类
2008/10/17 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
php发送与接收流文件的方法
2015/02/11 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
python中Genarator函数用法分析
2015/04/08 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
市场开发与营销专业求职信
2013/12/31 职场文书
大学生职业生涯规划方案
2014/01/03 职场文书
商务考察邀请函范文
2014/01/21 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
安全技术说明书
2014/05/09 职场文书
银行转正自我鉴定
2014/09/29 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python