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 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
JavaScript继承与多继承实例分析
May 26 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
vue的for循环使用方法
Feb 12 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 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
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
python自定义类并使用的方法
2015/05/07 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
python Canny边缘检测算法的实现
2020/04/24 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
优秀求职信范文分享
2013/12/19 职场文书
房地产销售计划书
2014/01/10 职场文书
铁路工务反思材料
2014/02/07 职场文书
4s店活动策划方案
2014/08/25 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
2014年药房工作总结
2014/11/22 职场文书
开票证明
2015/06/23 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
企业文化学习心得体会
2016/01/21 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书