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 相关文章推荐
Javascript模板技术
Apr 27 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
Feb 27 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
javascript 模拟点击广告
2010/01/02 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
快速使用node.js进行web开发详解
2017/04/26 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
p5.js入门教程之图片加载
2018/03/20 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
vue中轮训器的使用
2019/01/27 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
python实现数字炸弹游戏程序
2020/07/17 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
一套比较完整的软件测试人员面试题
2012/05/13 面试题
个人简历自我鉴定
2013/10/11 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
情人节活动策划方案
2014/02/27 职场文书
单位工作证明范文
2014/09/14 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
golang生成并解析JSON
2022/04/14 Golang
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript