01前端/JS - 格式化 json

一 使用原生 JSON.stringify 实现

<textarea name="" id="myTA" cols="30" rows="10"></textarea>
<script>
    var myTA = document.getElementById("myTA");
    myTA.value = JSON.stringify({"aaa":123,"bbb":456}, null, 4)
</script>

二 自己写函数实现

https://jsfiddle.net/q2gnX/

在线预览

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
// Notes:
// - json2.js is not needed if browser supports JSON.stringify and JSON.parse natively
// - jQuery is only used to place the results
// colon;冒号,pad;填补
var formatJson = function(json, options) {
var reg = null,
formatted = "",
pad = 0,
PADDING = " "; // one can also use '\t' or a different number of spaces

// optional settings
options = options || {};
// remove newline where '{' or '[' follows ':'
options.newlineAfterColonIfBeforeBraceOrBracket =
options.newlineAfterColonIfBeforeBraceOrBracket === true ? true : false;
// use a space after a colon
options.spaceAfterColon = options.spaceAfterColon === false ? false : true;

// begin formatting...

// make sure we start with the JSON as a string
if (typeof json !== "string") {
json = JSON.stringify(json);
}
// parse and stringify in order to remove extra whitespace
// json = JSON.stringify(JSON.parse(json));可以除去多余的空格
json = JSON.parse(json);
json = JSON.stringify(json);

// add newline before and after curly braces
reg = /([\{\}])/g;
json = json.replace(reg, "\r\n$1\r\n");

// add newline before and after square brackets
reg = /([\[\]])/g;
json = json.replace(reg, "\r\n$1\r\n");

// add newline after comma
reg = /(\,)/g;
json = json.replace(reg, "$1\r\n");

// remove multiple newlines
reg = /(\r\n\r\n)/g;
json = json.replace(reg, "\r\n");

// remove newlines before commas
reg = /\r\n\,/g;
json = json.replace(reg, ",");

// optional formatting...
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, ": ");
}

$.each(json.split("\r\n"), function(index, node) {
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;
};

var json = {};

// display formatted JSON (as JSON object)
json = {
a: {
aa: [
1,
2,
{ aaa: "abc", bbb: "defgh", ccc: 987 },
[100, 200, 300, { one: 1, two: "ii", three: "Three" }, 1000]
],
bb: "xyz",
ccc: 777
},
b: ["qqq", "www", "eee"],
c: "hello",
d: 12345
};
$("#formattedJson1").text(formatJson(json));

// display formatted JSON (from JSON string)
json =
'{ "a": { "aa": [ 1, 2, { "aaa": "abc",' +
' "bbb": "defgh", "ccc": 987 }, [ 100, ' +
'200, 300 , { "one": 1, "two" : "ii", "three" ' +
': "Three" }, 1000 ]' +
" ], " +
' "bb": "xyz", "ccc": 777 }, "b": [ "qqq", "www", ' +
'"eee" ], "c": "hello", "d": 12345 }';
$("#formattedJson2").text(formatJson(json));