JavaScript格式化json和xml的方法示例


Posted in Javascript onJanuary 22, 2019

本文实例讲述了JavaScript格式化json和xml的方法。分享给大家供大家参考,具体如下:

格式化json实例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>原生js格式化json的方法</title>
</head>
<body>
<!--格式化后的json写入的位置-->
<div id="writePlace"></div>
<script>
 //格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
 var formatJson = function (json, options) {
  var reg = null,
    formatted = '',
    pad = 0,
    PADDING = ' ';
  options = options || {};
  options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
  options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
  if (typeof json !== 'string') {
   json = JSON.stringify(json);
  } else {
   json = JSON.parse(json);
   json = JSON.stringify(json);
  }
  reg = /([\{\}])/g;
  json = json.replace(reg, '\r\n$1\r\n');
  reg = /([\[\]])/g;
  json = json.replace(reg, '\r\n$1\r\n');
  reg = /(\,)/g;
  json = json.replace(reg, '$1\r\n');
  reg = /(\r\n\r\n)/g;
  json = json.replace(reg, '\r\n');
  reg = /\r\n\,/g;
  json = json.replace(reg, ',');
  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, ':');
  }
  (json.split('\r\n')).forEach(function (node, index) {
     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;
 };
 //引用示例部分
 //(1)创建json格式或者从后台拿到对应的json格式
 var originalJson = {"name": "binginsist", "sex": "男", "age": "25"};
 //(2)调用formatJson函数,将json格式进行格式化
 var resultJson = formatJson(originalJson);
 //(3)将格式化好后的json写入页面中
 document.getElementById("writePlace").innerHTML = '<pre>' +resultJson + '<pre/>';
</script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

{
    "name":"binginsist",
    "sex":"男",
    "age":"25"
}

格式化xml实例

在格式化XML时后台需要对返回数据做一下处理:

StringEscapeUtils.escapeHtml(po.getMsgBody())
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>原生js格式化xml的方法</title>
</head>
<body>
<!--格式化后的xml写入的位置-->
<div id="writePlace"></div>
<script>
 //格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
 String.prototype.removeLineEnd = function () {
  return this.replace(/(<.+?\s+?)(?:\n\s*?(.+?=".*?"))/g, '$1 $2')
 }
 function formatXml(text) {
  //去掉多余的空格
  text = '\n' + text.replace(/(<\w+)(\s.*?>)/g, function ($0, name, props) {
     return name + ' ' + props.replace(/\s+(\w+=)/g, " $1");
    }).replace(/>\s*?</g, ">\n<");
  //把注释编码
  text = text.replace(/\n/g, '\r').replace(/<!--(.+?)-->/g, function ($0, text) {
   var ret = '<!--' + escape(text) + '-->';
   //alert(ret);
   return ret;
  }).replace(/\r/g, '\n');
  //调整格式
  var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/mg;
  var nodeStack = [];
  var output = text.replace(rgx, function ($0, all, name, isBegin, isCloseFull1, isCloseFull2, isFull1, isFull2) {
   var isClosed = (isCloseFull1 == '/') || (isCloseFull2 == '/' ) || (isFull1 == '/') || (isFull2 == '/');
   //alert([all,isClosed].join('='));
   var prefix = '';
   if (isBegin == '!') {
    prefix = getPrefix(nodeStack.length);
   }
   else {
    if (isBegin != '/') {
     prefix = getPrefix(nodeStack.length);
     if (!isClosed) {
      nodeStack.push(name);
     }
    }
    else {
     nodeStack.pop();
     prefix = getPrefix(nodeStack.length);
    }
   }
   var ret = '\n' + prefix + all;
   return ret;
  });
  var prefixSpace = -1;
  var outputText = output.substring(1);
  //alert(outputText);
  //把注释还原并解码,调格式
  outputText = outputText.replace(/\n/g, '\r').replace(/(\s*)<!--(.+?)-->/g, function ($0, prefix, text) {
   //alert(['[',prefix,']=',prefix.length].join(''));
   if (prefix.charAt(0) == '\r')
    prefix = prefix.substring(1);
   text = unescape(text).replace(/\r/g, '\n');
   var ret = '\n' + prefix + '<!--' + text.replace(/^\s*/mg, prefix) + '-->';
   //alert(ret);
   return ret;
  });
  return outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n');
 }
 function getPrefix(prefixIndex) {
  var span = ' ';
  var output = [];
  for (var i = 0; i < prefixIndex; ++i) {
   output.push(span);
  }
  return output.join('');
 }
 //引用示例部分
 //(1)创建xml格式或者从后台拿到对应的xml格式
 var originalXml = '<?xml version="1.0"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Dont forget me this weekend!</body> </note>';
 //(2)调用formatXml函数,将xml格式进行格式化
 var resultXml = formatXml(originalXml);
 //(3)将格式化好后的formatXml写入页面中
 document.getElementById("writePlace").innerHTML = '<pre>' +resultXml + '<pre/>';
</script>
</body>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,可得如下运行结果:

    Tove
    Jani
    Reminder
    Dont forget me this weekend!

Javascript 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
js的回调函数详解
Jan 05 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
学习vue.js条件渲染
Dec 03 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
基于vue的验证码组件的示例代码
Jan 22 #Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 #Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 #Javascript
js实现京东秒杀倒计时功能
Jan 21 #Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 #Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 #Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 #Javascript
You might like
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
yii框架源码分析之创建controller代码
2011/06/28 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
javascript闭包的理解
2015/04/01 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
bootstrap table服务端实现分页效果
2017/08/10 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
python3.3实现乘法表示例
2014/02/07 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
python变量不能以数字打头详解
2016/07/06 Python
python编程线性回归代码示例
2017/12/07 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
Python ORM编程基础示例
2020/02/02 Python
python中if及if-else如何使用
2020/06/02 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
如何用Python提取10000份log中的产品信息
2021/01/14 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
汉字听写大会观后感
2015/06/12 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技