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 CSS操作方法集合
Oct 31 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
简单的js计算器实现
Oct 26 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
Vue Element plus使用方法梳理
Dec 24 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常用表单验证类用法实例
2015/06/18 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
Javascript 二维数组
2009/11/26 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
vue实现图片上传功能
2020/05/28 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
技术总监管理职责范本
2014/03/06 职场文书
新郎答谢词
2015/01/04 职场文书
客户答谢会致辞
2015/01/20 职场文书
初中数学教学随笔
2015/08/15 职场文书
标准发言稿结尾
2019/07/18 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
opencv 分类白天与夜景视频的方法
2021/06/05 Python
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
MySQL读取JSON转换的方式
2022/03/18 MySQL
利用Python实现模拟登录知乎
2022/05/25 Python