本文实例讲述了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代码运行工具：测试上述代码，可得如下运行结果：
{
"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代码运行工具：测试上述代码，可得如下运行结果：
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实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
网友评论