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操作userdata
Apr 27 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
Postman参数化实现过程及原理解析
Aug 13 Javascript
node.js通过url读取文件
Oct 16 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中实现图片的锐化
2006/10/09 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
javascript定时变换图片实例代码
2013/03/17 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
基于node实现websocket协议
2016/04/25 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python 实现登录网页的操作方法
2018/05/11 Python
python版本五子棋的实现代码
2018/12/11 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
销售文员的岗位职责
2013/11/20 职场文书
初二物理教学反思
2014/01/29 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
优秀志愿者感言
2015/08/01 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android