01前端/JS - 格式化 json

  • 更新时间：2020-02-11 04:03
  • 创建时间：2019-02-27 22:35

一 使用原生 JSON.stringify 实现

1
2
3
4
5
<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));