欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-11 18:11:51
本文实例讲述了javascript格式化json和xml的方法。分享给大家供大家参考，具体如下： 格式化json实例 ...

本文实例讲述了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.jb51.net/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.jb51.net/code/htmljsrun测试上述代码，可得如下运行结果：

    tove
    jani
    reminder
    dont forget me this weekend!

ps：这里再为大家提供几款关于xml与json操作的在线工具供大家参考使用：

在线xml/json互相转换工具：

在线格式化xml/在线压缩xml：

xml在线压缩/格式化工具：

在线json代码检验、检验、美化、格式化工具：

json在线格式化工具：

在线json压缩/转义工具：

更多关于javascript相关内容可查看本站专题：《javascript操作xml文件技巧总结》、《javascript中json操作技巧总结》、《javascript字符与字符串操作技巧总结》、《javascript错误与调试技巧总结》及《javascript数据结构与算法技巧总结》

希望本文所述对大家javascript程序设计有所帮助。

上一篇： 使用JavaScript保存文本文件到本地的两种方法

下一篇： 画布旋转——HTML5之特效

推荐阅读