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 相关文章推荐
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
JS实现页面炫酷的时钟特效示例
Aug 14 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
PHP clearstatcache()函数详解
2010/03/02 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
javascript 命名规则 变量命名规则
2010/02/25 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python 提取文件的小程序
2009/07/29 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python unittest模块用法实例分析
2018/05/25 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
如何理解python面向对象编程
2020/06/01 Python
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
大学生简历中个人的自我评价
2013/10/06 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL
我收到了德劲DE1107
2022/04/05 无线电