js格式化JSON數據

時間 2020-07-09

原文原文鏈接

前言：

　　最近作的項目中遇到個須要在前端頁面中將某個設備須要的數據格式展現出來，方便用戶配置。一開始單純的將數據格式寫入到pre標籤中，可是經過pre標籤寫入的數據格式在代碼可視化上不是很優雅。因爲上述緣由，因此就建立了一個全局的數據格式配置文件，經過es6 中的模板字符串來實現，這樣就解決了代碼可視化不優雅的問題。可是後面又增長了一個動態數據格式的需求，這樣一來就不能經過模板字符串來解決了，因此就有了這篇文章中講述的經過js格式畫JSON數據的方案，這篇文章旨在記錄方案實現的方法，方便本身之後遇到一樣的需求直接粘貼複製，同時也但願可以幫助到遇到和我同樣需求的碼農。前端

示例效果圖以下：node

預覽地址：js實現格式化JSON數據es6

js格式化JSON數據的方法以下，其中各塊代碼具體表示的什麼意思及完成的功能都經過註釋的方式進行了詳細說明。正則表達式

  1 // 格式方法
  2 // 公共方法
  3 function transitionJsonToString (jsonObj, callback) {
  4     // 轉換後的jsonObj受體對象
  5     var _jsonObj = null;
  6     // 判斷傳入的jsonObj對象是否是字符串，若是是字符串須要先轉換爲對象，再轉換爲字符串，這樣作是爲了保證轉換後的字符串爲雙引號
  7     if (Object.prototype.toString.call(jsonObj) !== "[object String]") {
  8         try {
  9             _jsonObj = JSON.stringify(jsonObj);
 10         } catch (error) {
 11             // 轉換失敗錯誤信息
 12             console.error('您傳遞的json數據格式有誤，請覈對...');
 13             console.error(error);
 14             callback(error);
 15         }
 16     } else {
 17         try {
 18             jsonObj = jsonObj.replace(/(\')/g, '\"');
 19             _jsonObj = JSON.stringify(JSON.parse(jsonObj));
 20         } catch (error) {
 21             // 轉換失敗錯誤信息
 22             console.error('您傳遞的json數據格式有誤，請覈對...');
 23             console.error(error);
 24             callback(error);
 25         }
 26     }
 27     return _jsonObj;
 28 }
 29 // callback爲數據格式化錯誤的時候處理函數
 30 function formatJson (jsonObj, callback) {
 31     // 正則表達式匹配規則變量
 32     var reg = null;
 33     // 轉換後的字符串變量
 34     var formatted = '';
 35     // 換行縮進位數
 36     var pad = 0;
 37     // 一個tab對應空格位數
 38     var PADDING = '    ';
 39     // json對象轉換爲字符串變量
 40     var jsonString = transitionJsonToString(jsonObj, callback);
 41     if (!jsonString) {
 42         return jsonString;
 43     }
 44     // 存儲須要特殊處理的字符串段
 45     var _index = [];
 46     // 存儲須要特殊處理的「再數組中的開始位置變量索引
 47     var _indexStart = null;
 48     // 存儲須要特殊處理的「再數組中的結束位置變量索引
 49     var _indexEnd = null;
 50     // 將jsonString字符串內容經過\r\n符分割成數組
 51     var jsonArray = [];
 52     // 正則匹配到{,}符號則在兩邊添加回車換行
 53     jsonString = jsonString.replace(/([\{\}])/g, '\r\n$1\r\n');
 54     // 正則匹配到[,]符號則在兩邊添加回車換行
 55     jsonString = jsonString.replace(/([\[\]])/g, '\r\n$1\r\n');
 56     // 正則匹配到,符號則在兩邊添加回車換行
 57     jsonString = jsonString.replace(/(\,)/g, '$1\r\n');
 58     // 正則匹配到要超過一行的換行須要改成一行
 59     jsonString = jsonString.replace(/(\r\n\r\n)/g, '\r\n');
 60     // 正則匹配到單獨處於一行的,符號時須要去掉換行，將,置於同行
 61     jsonString = jsonString.replace(/\r\n\,/g, ',');
 62     // 特殊處理雙引號中的內容
 63     jsonArray = jsonString.split('\r\n');
 64     jsonArray.forEach(function (node, index) {
 65         // 獲取當前字符串段中"的數量
 66         var num = node.match(/\"/g) ? node.match(/\"/g).length : 0;
 67         // 判斷num是否爲奇數來肯定是否須要特殊處理
 68         if (num % 2 && !_indexStart) {
 69             _indexStart = index
 70         }
 71         if (num % 2 && _indexStart && _indexStart != index) {
 72             _indexEnd = index
 73         }
 74         // 將須要特殊處理的字符串段的其實位置和結束位置信息存入，並對應重置開始時和結束變量
 75         if (_indexStart && _indexEnd) {
 76             _index.push({
 77                 start: _indexStart,
 78                 end: _indexEnd
 79             })
 80             _indexStart = null
 81             _indexEnd = null
 82         }
 83     })
 84     // 開始處理雙引號中的內容，將多餘的"去除
 85     _index.reverse().forEach(function (item, index) {
 86         var newArray = jsonArray.slice(item.start, item.end + 1)
 87         jsonArray.splice(item.start, item.end + 1 - item.start, newArray.join(''))
 88     })
 89     // 獎處理後的數組經過\r\n鏈接符重組爲字符串
 90     jsonString = jsonArray.join('\r\n');
 91     // 將匹配到:後爲回車換行加大括號替換爲冒號加大括號
 92     jsonString = jsonString.replace(/\:\r\n\{/g, ':{');
 93     // 將匹配到:後爲回車換行加中括號替換爲冒號加中括號
 94     jsonString = jsonString.replace(/\:\r\n\[/g, ':[');
 95     // 將上述轉換後的字符串再次以\r\n分割成數組
 96     jsonArray = jsonString.split('\r\n');
 97     // 將轉換完成的字符串根據PADDING值來組合成最終的形態
 98     jsonArray.forEach(function (item, index) {
 99         console.log(item)
100         var i = 0;
101         // 表示縮進的位數，以tab做爲計數單位
102         var indent = 0;
103         // 表示縮進的位數，以空格做爲計數單位
104         var padding = '';
105         if (item.match(/\{$/) || item.match(/\[$/)) {
106             // 匹配到以{和[結尾的時候indent加1
107             indent += 1
108         } else if (item.match(/\}$/) || item.match(/\]$/) || item.match(/\},$/) || item.match(/\],$/)) {
109             // 匹配到以}和]結尾的時候indent減1
110             if (pad !== 0) {
111                 pad -= 1
112             }
113         } else {
114             indent = 0
115         }
116         for (i = 0; i < pad; i++) {
117             padding += PADDING
118         }
119         formatted += padding + item + '\r\n'
120         pad += indent
121        })
122     // 返回的數據須要去除兩邊的空格
123     return formatted.trim();
124 }