json字符串很有用，有時候一些后臺接口返回的信息是字符串格式的，可讀性很差，這個時候要是有個可以格式化并高亮顯示json串的方法那就好多了，下面看看一個正則表達式完成的json字符串的格式化與高亮顯示
首先是對輸入進行轉換，如果是對象則轉化為規(guī)范的json字符串，不是對象時，先將字符串轉化為對象（防止不規(guī)范的字符串），然后再次轉化為json串。其中json為輸入。
if (typeof json !== 'string') {json = JSON.stringify(json);} else {json = JSON.parse(json);json = JSON.stringify(json);} 等規(guī)范完數據之后對字符串進行標記，為了后面的切分、重新組合
這里有幾個地方要添加標記，包括大括號、小括號的前后和逗號的后面都要添加標記，我這里使用的是換行/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)化處理，去掉多余的換行、去掉逗號前面的換行，這樣做是為了在切分是免得出現空串浪費一次循環(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) {}函數中添加邏輯，對每一個切分單元進行處理，包括縮進和美化格式。
$.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、中括號標記為數組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>PS：正則表達式替換json字符串的某一項的數字值
aa=aa.replaceAll("/"ccfsID/":/"[0-9]*/"", "/"ccfsID/":/""+id1+"/"");aa為json字符串，如：
{"items":[{"dishprice":30,"ccfsID":"","order.item.id":1,"zuofaid":"","zuofajiajia":0,"isTaoCan":false,"num":1,"price":30,"name":"","ID":"00000001","lsdishID":"","zuofaname":"","tzs":"","addTime":"2013-05-14"}],"deskId":"00000008"}新聞熱點
疑難解答
