使用正則表達(dá)式的格式化與高亮顯示json字符串
json字符串很有用，有時(shí)候一些后臺(tái)接口返回的信息是字符串格式的，可讀性很差，這個(gè)時(shí)候要是有個(gè)可以格式化并高亮顯示json串的方法那就好多了，下面看看一個(gè)正則表達(dá)式完成的json字符串的格式化與高亮顯示
首先是對(duì)輸入進(jìn)行轉(zhuǎn)換，如果是對(duì)象則轉(zhuǎn)化為規(guī)范的json字符串，不是對(duì)象時(shí)，先將字符串轉(zhuǎn)化為對(duì)象（防止不規(guī)范的字符串），然后再次轉(zhuǎn)化為json串。其中json為輸入。
if (typeof json !== 'string') {
json = JSON.stringify(json);
} else {
json = JSON.parse(json);
json = JSON.stringify(json);
}
等規(guī)范完數(shù)據(jù)之后對(duì)字符串進(jìn)行標(biāo)記，為了后面的切分、重新組合
這里有幾個(gè)地方要添加標(biāo)記，包括大括號(hào)、小括號(hào)的前后和逗號(hào)的后面都要添加標(biāo)記，我這里使用的是換行\(zhòng)r\n（這樣在命令行下測(cè)試時(shí)效果會(huì)比較好看）。
// 在大括號(hào)前后添加換行
reg = /([\{\}])/g;
json = json.replace(reg, '\r\n$1\r\n');
// 中括號(hào)前后添加換行
reg = /([\[\]])/g;
json = json.replace(reg, '\r\n$1\r\n');
// 逗號(hào)后面添加換行
reg = /(\,)/g;
json = json.replace(reg, '$1\r\n');
添加完成標(biāo)記之后就要做一些優(yōu)化處理，去掉多余的換行、去掉逗號(hào)前面的換行，這樣做是為了在切分是免得出現(xiàn)空串浪費(fèi)一次循環(huán)處理，最后在冒號(hào)后面添加空格，看起來(lái)更漂亮。
// 去除多余的換行
reg = /(\r\n\r\n)/g;
json = json.replace(reg, '\r\n');
// 逗號(hào)前面的換行去掉
reg = /\r\n\,/g;
json = json.replace(reg, ',');
//冒號(hào)前面縮進(jìn)
reg = /\:/g;
json = json.replace(reg, ': ');
接下來(lái)就是對(duì)這個(gè)初步處理過(guò)的串進(jìn)行進(jìn)一步處理了,我會(huì)在function(index, node) {}函數(shù)中添加邏輯，對(duì)每一個(gè)切分單元進(jìn)行處理，包括縮進(jìn)和美化格式。
$.each(json.split('\r\n'), function(index, node) {});
首先說(shuō)下縮進(jìn)，縮進(jìn)的方法很簡(jiǎn)單，遇到{、[符號(hào)時(shí)縮進(jìn)增加1，遇到}、]符號(hào)時(shí)縮進(jìn)減少1，否則縮進(jìn)量不變。
//這里遇到{、[時(shí)縮進(jìn)等級(jí)加1，遇到}、]時(shí)縮進(jìn)等級(jí)減1，沒(méi)遇到時(shí)縮進(jìn)等級(jí)不變
if (node.match(/\{$/) || node.match(/\[$/)) {
indent = 1;
} else if (node.match(/\}/) || node.match(/\]/)) {
if (pad !== 0) {
pad -= 1;
}
} else {
indent = 0;
}
完成縮進(jìn)后就該美化高亮顯示代碼了，這里要用到幾個(gè)css規(guī)則，下面可以看到，對(duì)切分單元進(jìn)行高亮顯示的時(shí)候這里用正則進(jìn)行判斷，如果匹配到大括號(hào)標(biāo)記為對(duì)象class、中括號(hào)標(biāo)記為數(shù)組class、屬性名稱、屬性值，一次對(duì)這些進(jìn)行css規(guī)則添加，添加完成之后拼接起來(lái)就可以了。
.ObjectBrace{color:#00AA00;font-weight:bold;}
.ArrayBrace{color:#0033FF;font-weight:bold;}
.PropertyName{color:#CC0000;font-weight:bold;}
.String{color:#007777;}
.Number{color:#AA00AA;}
.Comma{color:#000000;font-weight:bold;}
//添加代碼高亮
node = node.replace(/([\{\}])/g,"<span class='ObjectBrace'>$1</span>");
node = node.replace(/([\[\]])/g,"<span class='ArrayBrace'>$1</span>");
node = node.replace(/(\".*\")(\:)(.*)(\,)?/g,"<span class='PropertyName'>$1</span>$2$3$4");
node = node.replace(/\"([^"]*)\"(\,)?$/g,"<span class='String'>\"$1\"</span><span class='Comma'>$2</span>");
node = node.replace(/(-?\d+)(\,)?$/g,"<span class='Number'>$1</span><span class='Comma'>$2</span>");
最后我們看看完整的方法代碼（這里我使用了jquery類(lèi)庫(kù)），以及測(cè)試地址：
要對(duì)jsonstr進(jìn)行美化，這樣就可以了APP.format(jsonstr)，直接輸出至<pre></pre>標(biāo)簽中就可以看到效果，
下面是一個(gè)測(cè)試地址，http://iforever.sinaapp.com/ 可以進(jìn)去試一下，看看完整的源代碼
<script>
var APP=function(){
var format=function(json){
var reg=null,
result='';
pad=0,
PADDING=' ';
if (typeof json !== 'string') {
json = JSON.stringify(json);
} else {
json = JSON.parse(json);
json = JSON.stringify(json);
}
// 在大括號(hào)前后添加換行
reg = /([\{\}])/g;
json = json.replace(reg, '\r\n$1\r\n');
// 中括號(hào)前后添加換行
reg = /([\[\]])/g;
json = json.replace(reg, '\r\n$1\r\n');
// 逗號(hào)后面添加換行
reg = /(\,)/g;
json = json.replace(reg, '$1\r\n');
// 去除多余的換行
reg = /(\r\n\r\n)/g;
json = json.replace(reg, '\r\n');
// 逗號(hào)前面的換行去掉
reg = /\r\n\,/g;
json = json.replace(reg, ',');
//冒號(hào)前面縮進(jìn)
reg = /\:/g;
json = json.replace(reg, ': ');
//對(duì)json按照換行進(jìn)行切分然后處理每一個(gè)小塊
$.each(json.split('\r\n'), function(index, node) {
var i = 0,
indent = 0,
padding = '';
//這里遇到{、[時(shí)縮進(jìn)等級(jí)加1，遇到}、]時(shí)縮進(jìn)等級(jí)減1，沒(méi)遇到時(shí)縮進(jìn)等級(jí)不變
if (node.match(/\{$/) || node.match(/\[$/)) {
indent = 1;
} else if (node.match(/\}/) || node.match(/\]/)) {
if (pad !== 0) {
pad -= 1;
}
} else {
indent = 0;
}
//padding保存實(shí)際的縮進(jìn)
for (i = 0; i < pad; i++) {
padding += PADDING;
}
//添加代碼高亮
node = node.replace(/([\{\}])/g,"<span class='ObjectBrace'>$1</span>");
node = node.replace(/([\[\]])/g,"<span class='ArrayBrace'>$1</span>");
node = node.replace(/(\".*\")(\:)(.*)(\,)?/g,"<span class='PropertyName'>$1</span>$2$3$4");
node = node.replace(/\"([^"]*)\"(\,)?$/g,"<span class='String'>\"$1\"</span><span class='Comma'>$2</span>");
node = node.replace(/(-?\d+)(\,)?$/g,"<span class='Number'>$1</span><span class='Comma'>$2</span>");
result += padding + node + '<br>';
pad += indent;
});
return result;
};
return {
"format":format,
};
}();
</script>
怎么樣，json字符串是不是美觀了很多呢，超級(jí)實(shí)用吧，這么好的東東，當(dāng)然不能獨(dú)享，這里推薦給小伙伴們。
相關(guān)文章
layui select動(dòng)態(tài)添加option的實(shí)例
下面小編就為大家分享一篇layui select動(dòng)態(tài)添加option的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了小程序接入騰訊位置服務(wù)的詳細(xì)流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
JS實(shí)現(xiàn)的樣式切換功能tableCSS實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的樣式切換功能tableCSS,結(jié)合實(shí)例形式分析了js頁(yè)面元素遍歷與樣式動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JS document文檔的簡(jiǎn)單操作,結(jié)合完整實(shí)例形式詳細(xì)分析了JavaScript document文檔元素添加、刪除、獲取、創(chuàng)建等相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-01-01
這篇文章主要介紹了關(guān)于ES6之"let"能替代"var"的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-06-06
微信小程序登錄對(duì)接Django后端實(shí)現(xiàn)JWT方式驗(yàn)證登錄詳解
這篇文章主要介紹了微信小程序登錄對(duì)接Django后端實(shí)現(xiàn)JWT方式驗(yàn)證登錄詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要為大家詳細(xì)介紹了如何實(shí)現(xiàn)有趣的bootstrap走動(dòng)進(jìn)度條,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript高級(jí)教程5.6之基本包裝類(lèi)型(詳細(xì))
在基本類(lèi)型當(dāng)中，有三種類(lèi)型是我們經(jīng)常使用的：boolean，number，string，通過(guò)本篇文章給大家介紹javascript高級(jí)教程5.6之基本包裝類(lèi)型，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這篇文章主要介紹了js如何設(shè)置緩存及獲取設(shè)置的緩存,需要的朋友可以參考下2014-05-05
JavaScript實(shí)現(xiàn)拼音排序的方法
本文將介紹JavaScript如何實(shí)現(xiàn)拼音排序 支持所有主流瀏覽器+中英文系統(tǒng)2012-11-11