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高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JS制作简单的三级联动
Mar 18 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
详解Angular的数据显示优化处理
Dec 26 Javascript
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
vue实现标签云效果的示例
Nov 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
php构造函数实例讲解
2013/11/13 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python自动登录126邮箱的方法
2015/07/10 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
自我鉴定书面格式
2014/01/13 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
创卫工作总结2015
2015/04/22 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS