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 相关文章推荐
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
canvas绘制爱心的几种方法总结(推荐)
Oct 31 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
JavaScrip数组去重操作实例小结
Jun 20 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
vue使用节流函数的踩坑实例指南
May 20 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
PHP 变量的定义方法
2010/01/26 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
Javascript string 扩展库代码
2010/04/09 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
2019/05/16 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
python使用生成器实现可迭代对象
2018/03/20 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
办公室文员自荐书
2014/02/03 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android