js 格式化json

vue中暫時接口請求/返回數據,需要格式化json

vue中使用<pre></pre>展示格式化後的代碼

由於接口請求有時會報錯,在原代碼上加上了try/catch,進行容錯處理

/**

* 格式化json

*/

// 工具方法

formatJson(json, options) {

try{

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;

}catch(e){

return json

}

}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章