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

2019-11-19 12:14:16

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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.VeVB.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.VeVB.COm/code/HtmlJsRun測試上述代碼，可得如下運行結果：