javascript格式化json數據顯示

1. 函數實現

2. // Example usage: http://jsfiddle.net/q2gnX/
4. var formatJson =function(json, options){
5. var reg =null,
6. formatted ='',
7. pad =0,
8. PADDING =' ';// one can also use '\t' or a different number of spaces
10. // optional settings
11. options = options ||{};
12. // remove newline where '{' or '[' follows ':'
13. options.newlineAfterColonIfBeforeBraceOrBracket =(options.newlineAfterColonIfBeforeBraceOrBracket ===true)?true:false;
14. // use a space after a colon
15. options.spaceAfterColon =(options.spaceAfterColon ===false)?false:true;
17. // begin formatting...
18. if(typeof json !=='string'){
19. // make sure we start with the JSON as a string
20. json = JSON.stringify(json);
21. }else{
22. // is already a string, so parse and re-stringify in order to remove extra whitespace
23. json = JSON.parse(json);
24. json = JSON.stringify(json);
25. }
27. // add newline before and after curly braces
28. reg =/([\{\}])/g;
29. json = json.replace(reg,'\r\n$1\r\n');
31. // add newline before and after square brackets
32. reg =/([\[\]])/g;
33. json = json.replace(reg,'\r\n$1\r\n');
35. // add newline after comma
36. reg =/(\,)/g;
37. json = json.replace(reg,'$1\r\n');
39. // remove multiple newlines
40. reg =/(\r\n\r\n)/g;
41. json = json.replace(reg,'\r\n');
43. // remove newlines before commas
44. reg =/\r\n\,/g;
45. json = json.replace(reg,',');
47. // optional formatting...
48. if(!options.newlineAfterColonIfBeforeBraceOrBracket){
49. reg =/\:\r\n\{/g;
50. json = json.replace(reg,':{');
51. reg =/\:\r\n\[/g;
52. json = json.replace(reg,':[');
53. }
54. if(options.spaceAfterColon){
55. reg =/\:/g;
56. json = json.replace(reg,': ');
57. }
59. $.each(json.split('\r\n'),function(index, node){
60. var i =0,
61. indent =0,
62. padding ='';
64. if(node.match(/\{$/)|| node.match(/\[$/)){
65. indent =1;
66. }elseif(node.match(/\}/)|| node.match(/\]/)){
67. if(pad !==0){
68. pad -=1;
69. }
70. }else{
71. indent =0;
72. }
74. for(i =0; i < pad; i++){
75. padding += PADDING;
76. }
78. formatted += padding + node +'\r\n';
79. pad += indent;
80. });
82. return formatted;
83. };
84. // 該代碼片段來自於: http://www.sharejs.com/codes/javascript/5452

函數使用

• 參數 newlineAfterColonIfBeforeBraceOrBracket 標識大括號是跟在後面還是重起一行

  • formatJson({a: {b : 1}, c: 2})

    1. "
    2. {
    3. "a": {
    4. "b": 1
    5. },
    6. "c": 2
    7. }
    9. "

  • formatJson({a: {b : 1}, c: 2}, {newlineAfterColonIfBeforeBraceOrBracket: true})

    1. "
    2. {
    3. "a":
    4. {
    5. "b": 1
    6. },
    7. "c": 2
    8. }
    10. "

JSON 展示

 

• div + white-space: pre;
• textarea
  1. $("#share")[0].style.height ="0"
  2. $("#share")[0].style.height = $("#share")[0].scrollHeight +'px'