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 相关文章推荐
JavaScript 无符号右移运算符
Apr 17 Javascript
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 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
初探PHP5
2006/10/09 PHP
PHP 实例化类的一点摘记
2008/03/23 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
jQuery事件用法详解
2016/10/06 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python写入CSV文件的方法
2015/07/08 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python文件操作函数用法实例详解
2019/12/24 Python
python3中sys.argv的实例用法
2020/04/24 Python
cf战队收人广告词
2014/03/14 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
高中语文教学反思范文
2016/02/16 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技