Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1485410
  • 博文数量: 410
  • 博客积分: 9563
  • 博客等级: 中将
  • 技术积分: 4517
  • 用 户 组: 普通用户
  • 注册时间: 2010-07-03 19:59
个人简介

文章分类

全部博文(410)

文章存档

2017年(6)

2016年(1)

2015年(3)

2014年(4)

2013年(32)

2012年(45)

2011年(179)

2010年(140)

分类: JavaScript

2017-06-14 01:51:25


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>原生js格式化json的方法</title>
  6. </head>
  7. <body>

  8. <div id="writePlace"></div>
  9. <script>
  10.     //格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
  11.     var formatJson = function (json, options) {
  12.         var reg = null,
  13.             formatted = '',
  14.             pad = 0,
  15.             PADDING = ' ';
  16.         options = options || {};
  17.         options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
  18.         options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
  19.         if (typeof json !== 'string') {
  20.             json = JSON.stringify(json);
  21.         } else {
  22.             json = JSON.parse(json);
  23.             json = JSON.stringify(json);
  24.         }
  25.         reg = /([\{\}])/g;
  26.         json = json.replace(reg, '\r\n$1\r\n');
  27.         reg = /([\[\]])/g;
  28.         json = json.replace(reg, '\r\n$1\r\n');
  29.         reg = /(\,)/g;
  30.         json = json.replace(reg, '$1\r\n');
  31.         reg = /(\r\n\r\n)/g;
  32.         json = json.replace(reg, '\r\n');
  33.         reg = /\r\n\,/g;
  34.         json = json.replace(reg, ',');
  35.         if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
  36.             reg = /\:\r\n\{/g;
  37.             json = json.replace(reg, ':{');
  38.             reg = /\:\r\n\[/g;
  39.             json = json.replace(reg, ':[');
  40.         }
  41.         if (options.spaceAfterColon) {
  42.             reg = /"\:/g;
  43.             json = json.replace(reg, '": ');
  44.         }
  45.         (json.split('\r\n')).forEach(function (node, index) {
  46.                 var i = 0,
  47.                     indent = 0,
  48.                     padding = '';
  49.                 if (node.match(/\{$/) || node.match(/\[$/)) {
  50.                     indent = 1;
  51.                 } else if (node.match(/\}/) || node.match(/\]/)) {
  52.                     if (pad !== 0) {
  53.                         pad -= 1;
  54.                     }
  55.                 } else {
  56.                     indent = 0;
  57.                 }
  58.                 for (i = 0; i < pad; i++) {
  59.                     padding += PADDING;
  60.                 }
  61.                 formatted += padding + node + '\r\n';
  62.                 pad += indent;
  63.             }
  64.         );
  65.         return formatted;
  66.     };

  67.     //引用示例部分
  68.     //(1)创建json格式或者从后台拿到对应的json格式
  69.     // var originalJson = {"name": "binginsist", "sex": "男", "age": "25"};
  70.     var originalJson = {
  71.         "name": "站长工具",
  72.         "url": "",
  73.         "address": {"city": "厦门", "country": "中国"},
  74.         "arrayBrowser": [{"name": "Google", "url": ""}, {
  75.             "name": "Baidu",
  76.             "url": ""
  77.         }, {"name": "SoSo", "url": ""}]
  78.     };
  79.     //(2)调用formatJson函数,将json格式进行格式化
  80.     // var options = {newlineAfterColonIfBeforeBraceOrBracket: false, spaceAfterColon: false};
  81.     var resultJson = formatJson(originalJson);
  82.     //(3)将格式化好后的json写入页面中
  83.     document.getElementById("writePlace").innerHTML = '<pre>' + resultJson + '<pre/>







阅读(1172) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~