正規表現JSON文字列を最適化するテクニック

json文字列は役に立ち、バックグラウンドインタフェースから返される情報が文字列フォーマットであり、可読性が悪い場合があります.この場合、json列をフォーマットしてハイライト表示する方法があればいいのですが、正規表現で完成したjson文字列のフォーマットとハイライト表示を見てみましょう.
まず入力を変換し、オブジェクトであれば仕様のjson文字列に変換し、オブジェクトでなければ文字列をオブジェクト(非仕様の文字列を防ぐ)に変換してから、再びjson列に変換します.ここでjsonは入力です.

if (typeof json !== 'string') {
json = JSON.stringify(json);
} else {
json = JSON.parse(json);
json = JSON.stringify(json);
} 

データのスペシフィケーションが完了した後に文字列をマークし、後の分割、再結合のために
ここには、カッコ、カッコの前後、カンマの後ろなど、タグを追加する場所がいくつかあります.ここでは改行rを使用しています(コマンドラインでテストすると効果的です).

//           
reg = /([\{\}])/g;
json = json.replace(reg, '\r
$1\r
');
//          
reg = /([\[\]])/g;
json = json.replace(reg, '\r
$1\r
');
//         
reg = /(\,)/g;
json = json.replace(reg, '$1\r
'); 

完了マークを追加したら最適化処理を行い、余分な改行を削除したり、カンマの前の改行を削除したりします.これは、空白列が発生しないように分割してループ処理を無駄にしないようにし、最後にコロンの後ろにスペースを追加して、よりきれいに見えるようにするためです.

//        
reg = /(\r
\r
)/g;
json = json.replace(reg, '\r
');
//          
reg = /\r
\,/g;
json = json.replace(reg, ',');
//      
reg = /\:/g;
json = json.replace(reg, ': '); 

次に、この初歩的に処理された列をさらに処理します.function(index,node){}関数に論理を追加し、インデントと美化フォーマットを含む各分割ユニットを処理します.

$.each(json.split('\r
'), 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/ 可以进去试一下，看看完整的源代码
 
 
 
  


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
$1\r
');
//          
reg = /([\[\]])/g;
json = json.replace(reg, '\r
$1\r
');
//         
reg = /(\,)/g;
json = json.replace(reg, '$1\r
');
//        
reg = /(\r
\r
)/g;
json = json.replace(reg, '\r
');
//          
reg = /\r
\,/g;
json = json.replace(reg, ',');
//      
reg = /\:/g;
json = json.replace(reg, ': ');
// json                 
$.each(json.split('\r
'), 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,
};
}();
に直接出力
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"}