使用正則表達式的格式化與高亮顯示json字符串
json字符串很有用，有時候一些后臺接口返回的信息是字符串格式的，可讀性很差，這個時候要是有個可以格式化并高亮顯示json串的方法那就好多了，下面看看一個正則表達式完成的json字符串的格式化與高亮顯示
首先是對輸入進行轉(zhuǎn)換，如果是對象則轉(zhuǎn)化為規(guī)范的json字符串，不是對象時，先將字符串轉(zhuǎn)化為對象（防止不規(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ù)之后對字符串進行標記，為了后面的切分、重新組合
這里有幾個地方要添加標記，包括大括號、小括號的前后和逗號的后面都要添加標記，我這里使用的是換行\(zhòng)r\n（這樣在命令行下測試時效果會比較好看）。
// 在大括號前后添加換行
reg = /([\{\}])/g;
json = json.replace(reg, '\r\n$1\r\n');
// 中括號前后添加換行
reg = /([\[\]])/g;
json = json.replace(reg, '\r\n$1\r\n');
// 逗號后面添加換行
reg = /(\,)/g;
json = json.replace(reg, '$1\r\n');
添加完成標記之后就要做一些優(yōu)化處理，去掉多余的換行、去掉逗號前面的換行，這樣做是為了在切分是免得出現(xiàn)空串浪費一次循環(huán)處理，最后在冒號后面添加空格，看起來更漂亮。
// 去除多余的換行
reg = /(\r\n\r\n)/g;
json = json.replace(reg, '\r\n');
// 逗號前面的換行去掉
reg = /\r\n\,/g;
json = json.replace(reg, ',');
//冒號前面縮進
reg = /\:/g;
json = json.replace(reg, ': ');
接下來就是對這個初步處理過的串進行進一步處理了,我會在function(index, node) {}函數(shù)中添加邏輯，對每一個切分單元進行處理，包括縮進和美化格式。
$.each(json.split('\r\n'), function(index, node) {});
首先說下縮進，縮進的方法很簡單，遇到{、[符號時縮進增加1，遇到}、]符號時縮進減少1，否則縮進量不變。
//這里遇到{、[時縮進等級加1，遇到}、]時縮進等級減1，沒遇到時縮進等級不變
if (node.match(/\{$/) || node.match(/\[$/)) {
indent = 1;
} else if (node.match(/\}/) || node.match(/\]/)) {
if (pad !== 0) {
pad -= 1;
}
} else {
indent = 0;
}
完成縮進后就該美化高亮顯示代碼了，這里要用到幾個css規(guī)則，下面可以看到，對切分單元進行高亮顯示的時候這里用正則進行判斷，如果匹配到大括號標記為對象class、中括號標記為數(shù)組class、屬性名稱、屬性值，一次對這些進行css規(guī)則添加，添加完成之后拼接起來就可以了。
.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類庫），以及測試地址：
要對jsonstr進行美化，這樣就可以了APP.format(jsonstr)，直接輸出至<pre></pre>標簽中就可以看到效果，
下面是一個測試地址，http://iforever.sinaapp.com/ 可以進去試一下，看看完整的源代碼
<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);
}
// 在大括號前后添加換行
reg = /([\{\}])/g;
json = json.replace(reg, '\r\n$1\r\n');
// 中括號前后添加換行
reg = /([\[\]])/g;
json = json.replace(reg, '\r\n$1\r\n');
// 逗號后面添加換行
reg = /(\,)/g;
json = json.replace(reg, '$1\r\n');
// 去除多余的換行
reg = /(\r\n\r\n)/g;
json = json.replace(reg, '\r\n');
// 逗號前面的換行去掉
reg = /\r\n\,/g;
json = json.replace(reg, ',');
//冒號前面縮進
reg = /\:/g;
json = json.replace(reg, ': ');
//對json按照換行進行切分然后處理每一個小塊
$.each(json.split('\r\n'), function(index, node) {
var i = 0,
indent = 0,
padding = '';
//這里遇到{、[時縮進等級加1，遇到}、]時縮進等級減1，沒遇到時縮進等級不變
if (node.match(/\{$/) || node.match(/\[$/)) {
indent = 1;
} else if (node.match(/\}/) || node.match(/\]/)) {
if (pad !== 0) {
pad -= 1;
}
} else {
indent = 0;
}
//padding保存實際的縮進
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字符串是不是美觀了很多呢，超級實用吧，這么好的東東，當然不能獨享，這里推薦給小伙伴們。
相關(guān)文章
js圖數(shù)據(jù)結(jié)構(gòu)處理 迪杰斯特拉算法代碼實例
這篇文章主要介紹了js圖數(shù)據(jù)結(jié)構(gòu)處理 迪杰斯特拉算法代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
java必學(xué)必會之static關(guān)鍵字，static關(guān)鍵字是很多朋友在編寫代碼和閱讀代碼時碰到的比較難以理解的一個關(guān)鍵字，下面結(jié)合大家一起學(xué)習(xí)static關(guān)鍵字2015-12-12
JS實現(xiàn)Enter鍵跳轉(zhuǎn)及控件獲得焦點
想讓Enter鍵跳轉(zhuǎn)的同時讓控件獲得焦點，具體實現(xiàn)js代碼如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要介紹了JavaScript中常見的幾種繼承方式，繼承可以訪問父類原型上的方法或?qū)傩?，實現(xiàn)了方法復(fù)用，但是創(chuàng)建子類實例時，不能傳父類的參數(shù)，子類實例共享了父類構(gòu)造函數(shù)的屬性值2022-06-06
layui異步加載table表中某一列數(shù)據(jù)的例子
今天小編就為大家分享一篇layui異步加載table表中某一列數(shù)據(jù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
js實現(xiàn)省級聯(lián)動（數(shù)據(jù)結(jié)構(gòu)優(yōu)化）
這篇文章主要為大家詳細介紹了js實現(xiàn)省級聯(lián)動，數(shù)據(jù)結(jié)構(gòu)優(yōu)化，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要為大家介紹了去除element-ui中Dialog對話框遮罩層方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
百度UEditor編輯器如何關(guān)閉抓取遠程圖片功能
這篇文章主要介紹了百度UEditor編輯器如何關(guān)閉抓取遠程圖片功能,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)無縫滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
javascript 無限聯(lián)動菜單效果代碼，需要的朋友可以參考下。2010-04-04