JSON格式化
對(duì)于UI上input或者textarea，根據(jù)不同的需求或者說(shuō)要求實(shí)現(xiàn)不同的展示效果粘咖。對(duì)此蚣抗，如若user輸入的是一個(gè)不整潔的JSON對(duì)象，在UI上做展示或者將數(shù)據(jù)傳給后臺(tái)同學(xué)瓮下，未經(jīng)處理修飾的JSON是一團(tuán)糟翰铡。
對(duì)此，做一下處理
有空格讽坏、換行符
1.去掉所有空格" "和換行符(前兩個(gè)replace是為了去掉所有空格锭魔，第三個(gè)是去掉換行符)
str.replace(/\r/ig, "").replace(/\n/ig, "").replace(/\s/g,"")
2.根據(jù)后臺(tái)接口的要求
(1)json對(duì)象
string轉(zhuǎn)json
JSON.parse(str)
(2)string
1.如自身是string，可以直接傳值路呜，不用轉(zhuǎn)換
2.json轉(zhuǎn)string
JSON.stringify(json串)
處理前顯示
在傳給后臺(tái)的JSON沒(méi)有處理直接轉(zhuǎn)成string的話迷捧，如上顯示。
若按照格式化展示胀葱，如下
處理后顯示
情況1.直接顯示在div中漠秋，可以使用<pre>標(biāo)簽
并且結(jié)合JSON.stringify(data, null, 4)
情況2.在textarea中顯示做Update，可以使用函數(shù)方法在js中處理
getFormatJsonStrFromString(jsonStr){ //UI展示格式化JSON數(shù)據(jù)
let res="";
if(jsonStr){
for(let i=0,j=0,k=0,ii,ele;i<jsonStr.length;i++) {//k:縮進(jìn)抵屿，j:""個(gè)數(shù)
ele=jsonStr.charAt(i);
if(j%2==0&&ele=="}") {
k--;
for(ii=0;ii<k;ii++) ele=" "+ele;
ele="\n"+ele;
} else if(j%2==0&&ele=="{") {
ele+="\n";
k++;
for(ii=0;ii<k;ii++) ele+=" ";
} else if(j%2==0&&ele==",") {
ele+="\n";
for(ii=0;ii<k;ii++) ele+=" ";
} else if(ele=="\"") j++;
res+=ele;
}
// console.log(res);
return res;
}
}
JSON校驗(yàn)
isJSON(str) { //驗(yàn)證輸入JSON格式正確
//console.log(str);
if (typeof str == 'string') {
try {
let obj=JSON.parse(str);
//console.log(obj);
if(obj && typeof obj == 'object' ){
// console.log('true');
return true;
}else{
// console.log('false');
return false;
}
} catch(e) {
return false;
}
}
}
