在工作中一直看各位前辈的博客解决各种问题,对我的帮助很大,非常感谢! 之前一直比较忙没有写博客,终于过年有了点空闲时间,可以把自己积累的东西分享下,笔记中的部分函数不是自己写的,都是工作中一点点积累的,由于时间已久比较零散找不到对应的主人了,没法注明出处还请见谅。我们经常遇到从后代拿到的没有格式化的json和xml,需要格式化好了以后显示在页面上,这篇文章希望可以让您更加方便的实现这个需求。本文的代码使用原生方式编写,不需要引用其他插件,可以在传统项目和自动化项目中直接使用。为了方便测试,我整理了下,只要建一个空的html,将所有的代码copy进去,本地打开就可以查看效果。做好的html在GitHub上也放了一份,以后有时间就会将自己整理的笔记放到上面,地址如下: https://github.com/binginsist/binginsistNote
格式化json实例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>原生js格式化json的方法</title>
6 </head>
7 <body>
8 <!--格式化后的json写入的位置-->
9 <div id="writePlace"></div>
10 <script>
11 //格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
12 var formatJson = function (json, options) {
13 var reg = null,
14 formatted = \'\',
15 pad = 0,
16 PADDING = \' \';
17 options = options || {};
18 options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
19 options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
20 if (typeof json !== \'string\') {
21 json = JSON.stringify(json);
22 } else {
23 json = JSON.parse(json);
24 json = JSON.stringify(json);
25 }
26 reg = /([\{\}])/g;
27 json = json.replace(reg, \'\r\n$1\r\n\');
28 reg = /([\[\]])/g;
29 json = json.replace(reg, \'\r\n$1\r\n\');
30 reg = /(\,)/g;
31 json = json.replace(reg, \'$1\r\n\');
32 reg = /(\r\n\r\n)/g;
33 json = json.replace(reg, \'\r\n\');
34 reg = /\r\n\,/g;
35 json = json.replace(reg, \',\');
36 if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
37 reg = /\:\r\n\{/g;
38 json = json.replace(reg, \':{\');
39 reg = /\:\r\n\[/g;
40 json = json.replace(reg, \':[\');
41 }
42 if (options.spaceAfterColon) {
43 reg = /\:/g;
44 json = json.replace(reg, \':\');
45 }
46 (json.split(\'\r\n\')).forEach(function (node, index) {
47 var i = 0,
48 indent = 0,
49 padding = \'\';
50
51 if (node.match(/\{$/) || node.match(/\[$/)) {
52 indent = 1;
53 } else if (node.match(/\}/) || node.match(/\]/)) {
54 if (pad !== 0) {
55 pad -= 1;
56 }
57 } else {
58 indent = 0;
59 }
60
61 for (i = 0; i < pad; i++) {
62 padding += PADDING;
63 }
64
65 formatted += padding + node + \'\r\n\';
66 pad += indent;
67 }
68 );
69 return formatted;
70 };
71 //引用示例部分
72 //(1)创建json格式或者从后台拿到对应的json格式
73 var originalJson = {"name": "binginsist", "sex": "男", "age": "25"};
74 //(2)调用formatJson函数,将json格式进行格式化
75 var resultJson = formatJson(originalJson);
76 //(3)将格式化好后的json写入页面中
77 document.getElementById("writePlace").innerHTML = \'<pre>\' +resultJson + \'<pre/>\';
78 </script>
79 </body>
80 </html>
格式化xml实例:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>原生js格式化xml的方法</title>
6 </head>
7 <body>
8 <!--格式化后的xml写入的位置-->
9 <div id="writePlace"></div>
10 <script>
11 //格式化代码函数,已经用原生方式写好了不需要改动,直接引用就好
12 String.prototype.removeLineEnd = function () {
13 return this.replace(/(<.+?\s+?)(?:\n\s*?(.+?=".*?"))/g, \'$1 $2\')
14 }
15 function formatXml(text) {
16 //去掉多余的空格
17 text = \'\n\' + text.replace(/(<\w+)(\s.*?>)/g, function ($0, name, props) {
18 return name + \' \' + props.replace(/\s+(\w+=)/g, " $1");
19 }).replace(/>\s*?</g, ">\n<");
20
21 //把注释编码
22 text = text.replace(/\n/g, \'\r\').replace(/<!--(.+?)-->/g, function ($0, text) {
23 var ret = \'<!--\' + escape(text) + \'-->\';
24 //alert(ret);
25 return ret;
26 }).replace(/\r/g, \'\n\');
27
28 //调整格式
29 var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/mg;
30 var nodeStack = [];
31 var output = text.replace(rgx, function ($0, all, name, isBegin, isCloseFull1, isCloseFull2, isFull1, isFull2) {
32 var isClosed = (isCloseFull1 == \'/\') || (isCloseFull2 == \'/\' ) || (isFull1 == \'/\') || (isFull2 == \'/\');
33 //alert([all,isClosed].join(\'=\'));
34 var prefix = \'\';
35 if (isBegin == \'!\') {
36 prefix = getPrefix(nodeStack.length);
37 }
38 else {
39 if (isBegin != \'/\') {
40 prefix = getPrefix(nodeStack.length);
41 if (!isClosed) {
42 nodeStack.push(name);
43 }
44 }
45 else {
46 nodeStack.pop();
47 prefix = getPrefix(nodeStack.length);
48 }
49
50 }
51 var ret = \'\n\' + prefix + all;
52 return ret;
53 });
54
55 var prefixSpace = -1;
56 var outputText = output.substring(1);
57 //alert(outputText);
58
59 //把注释还原并解码,调格式
60 outputText = outputText.replace(/\n/g, \'\r\').replace(/(\s*)<!--(.+?)-->/g, function ($0, prefix, text) {
61 //alert([\'[\',prefix,\']=\',prefix.length].join(\'\'));
62 if (prefix.charAt(0) == \'\r\')
63 prefix = prefix.substring(1);
64 text = unescape(text).replace(/\r/g, \'\n\');
65 var ret = \'\n\' + prefix + \'<!--\' + text.replace(/^\s*/mg, prefix) + \'-->\';
66 //alert(ret);
67 return ret;
68 });
69
70 return outputText.replace(/\s+$/g, \'\').replace(/\r/g, \'\r\n\');
71 }
72 function getPrefix(prefixIndex) {
73 var span = \' \';
74 var output = [];
75 for (var i = 0; i < prefixIndex; ++i) {
76 output.push(span);
77 }
78
79 return output.join(\'\');
80 }
81
82 //引用示例部分
83 //(1)创建xml格式或者从后台拿到对应的xml格式
84 var originalXml = \'<?xml version="1.0"?> <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Dont forget me this weekend!</body> </note>\';
85 //(2)调用formatXml函数,将xml格式进行格式化
86 var resultXml = formatXml(originalXml);
87 //(3)将格式化好后的formatXml写入页面中
88 document.getElementById("writePlace").innerHTML = \'<pre>\' +resultXml + \'<pre/>\';
89 </script>
90 </body>
91 </html>