正規表現を使用した JSON 文字列の書式設定と強調表示_JavaScript スキル

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(/[$/)) {
インデント = 1;
} else if (node.match(/}/) || node.match(/]/)) {
If (パッド !== 0) {
パッド -= 1;
}
} else {
インデント = 0;
}

インデントが完了したら、ここでいくつかの CSS ルールを使用して、セグメント化されたユニットを強調表示するときに、大括弧に一致するかどうかを判断します。オブジェクト クラスをマークし、角かっこで配列クラス、属性名、および属性値をマークします。これらの 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=関数(){
var format=function(json){
var reg=null,
result='';
パッド=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, '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, ': ');
// 改行に従って json を分割し、それぞれの小さな部分を処理します
$.each(json.split('rn'), function(index, node) {
var i = 0,
インデント = 0,
パディング = '';
// ここで、{、[ が出現するとインデント レベルは 1 増加し、}、] が出現するとインデント レベルは 1 減少し、出現しない場合はインデント レベルは変更されません
If (node.match(/{$/) || node.match(/[$/)) {
インデント = 1;
} else if (node.match(/}/) || node.match(/]/)) {
If (パッド !== 0) {
パッド -= 1;
}
} else {
インデント = 0;
                }
                   //padding保存实际的缩进
                for (i = 0; i                     パディング = PADDING;
                }
                //添加代码高亮
                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");
                result = パディングノード '
';
                パッド = インデント;
            });
            結果を返します;
        };
        戻り値 {
            "形式":形式,
        };
    }();

怎么样，json 文字列は美观了多呢、超級実用的、この素晴らしい商品、当然のことながら単独で共有することはできません、ここで推奨されています。