json字串很有用，有時候一些後台介面回傳的資訊是字串格式的，可讀性很差，這個時候要是有個可以格式化並高亮顯示json字串的方法那就好多了，下面看看一個正規表示式完成的json字串的格式化與高亮顯示
首先是對輸入進行轉換，如果是物件則轉換為規範的json字串，不是物件時，先將字串轉換為物件（防止不規範的字串），然後再次轉換為json字串。其中json為輸入。
if (typeof json !== 'string') {
json = JSON.stringify(json);
} else {
json = JSON.parse(json);
json = JSON.stringify(json);
}
等規範完資料之後才對字串進行標記，為了後面的切分、重新組合
這裡有幾個地方要添加標記，包括大括號、小括號的前後和逗號的後面都要添加標記，我這裡使用的是換行
n（這樣在命令列下測試時效果會比較好看）。
// 在大括號前後加上換行
reg = /([{}])/g;
json = json.replace(reg, 'rn$1rn');
// 中括號前後加換行
reg = /([[]])/g;
json = json.replace(reg, 'rn$1rn');
// 逗號後面加上換行
reg = /(,)/g;
json = json.replace(reg, '$1rn');
添加完成標記之後就要做一些優化處理，去掉多餘的換行、去掉逗號前面的換行，這樣做是為了在切分是免得出現空串浪費一次循環處理，最後在冒號後面添加空格，看起來更漂亮。
// 去除多餘的換行
reg = /(rnrn)/g;
json = json.replace(reg, 'rn');
// 逗號前面的換行去掉
reg = /rn,/g;
json = json.replace(reg, ',');
//冒號前面縮排
reg = /:/g;
json = json.replace(reg, ': ');
接下來就是對這個初步處理過的字串進行進一步處理了,我會在function(index, node) {}函數中添加邏輯，對每一個切分單元進行處理，包括縮排和美化格式。
$.each(json.split('rn'), 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規則，下面可以看到，對切分單元進行高亮顯示的時候這裡用正則進行判斷，如果匹配到大括號標示為物件class、中括號標示為陣列class、屬性名稱、屬性值，一次對這些進行css規則添加，添加完成之後拼接起來就可以了。
.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,"$1");
node = node.replace(/([[]])/g,"$1");
node = node.replace(/(".*")(:)(.*)(,)?/g,"$1$2$3$4");
node = node.replace(/"([^"]*)"(,)?$/g,""$1"$2");
node = node.replace(/(-?d )(,)?$/g,"$1$2");
最後我們來看看完整的方法程式碼（這裡我使用了jquery類別庫），以及測試位址：
要對jsonstr進行美化，這樣就可以了APP.format(jsonstr)，直接輸出至
標籤中就可以看到效果，
下面是一個測試位址，http://iforever.sinaapp.com/ 可以進去試一下，看看完整的原始碼
<script><br />
var APP=function(){<br />
var format=function(json){<br />
var reg=null,<br />
result='';<br />
pad=0,<br />
PADDING=' ';<br />
if (typeof json !== 'string') {<br />
json = JSON.stringify(json);<br />
} else {<br />
json = JSON.parse(json);<br />
json = JSON.stringify(json);<br />
}<br />
// 在大括號前後加上轉換方向<br />
reg = /([{}])/g;<br />
json = json.replace(reg, 'rn$1rn');<br />
// 中括號前後加上換行<br />
reg = /([[]])/g;<br />
json = json.replace(reg, 'rn$1rn');<br />
// 逗號後面加上換行<br />
reg = /(,)/g;<br />
json = json.replace(reg, '$1rn');<br />
// 移除多餘的換行<br />
reg = /(rnrn)/g;<br />
json = json.replace(reg, 'rn');<br />
// 逗號前面的換行去除<br />
reg = /rn,/g;<br />
json = json.replace(reg, ',');<br />
//冒號前方縮排<br />
reg = /:/g;<br />
json = json.replace(reg, ': ');<br />
//將json依照換行切分後處理每一個小塊<br />
$.each(json.split('rn'), function(index, node) {<br />
var i = 0,<br />
indent = 0,<br />
padding = '';<br />
//這裡遇到{、[時縮減等級加1，與中}、]時縮減等級減1，沒有遇到時縮減等級不變<br />
if (node.match(/{$/) || node.match(/[$/)) {<br />
indent = 1;<br />
} else if (node.match(/}/) || node.match(/]/)) {<br />
if (pad !== 0) {<br />
pad -= 1;<br />
}<br />
} else {<br />
indent = 0;<br /> }<br />
//padding保存實際的縮排<br />
for (i = 0; i < pad; i ) {<br />
填充物=填補;<br />
}<br />
//新增代碼高亮<br />
node = node.replace(/([{}])/g,"<span class='ObjectBrace'>$1");<br />
node = node.replace(/([[]])/g,"<span class='ArrayBrace'>$1");<br />
節點 = node.replace(/(".*")(:)(.*)(,)?/g,"<span class='PropertyName'>$1$2$3$4") <br />
node = node.replace(/"([^"]*)"(,)?$/g,"<span class='String'>"$1"<span class='逗號'>$2< /span>");<br />
節點= node.replace(/(-?d )(,)?$/g,"<span class='Number'>$1<span class='Comma'>$2< /span>"); <br />
結果 = 填入節點 '<br>';<br />
pad = 縮排；<br />
});<br />
回報結果；<br />
};<br />
返回{<br />
「格式」：格式，<br />
};<br />
}();<br />
</腳本><br />
</script>
怎麼樣，json字串是不是很漂亮呢，超實用吧，這麼好的東東，當然不能獨享，這裡推薦給小夥伴們。
