Memformat dan menyerlahkan rentetan json menggunakan kemahiran expressions_javascript biasa

Rentetan Json sangat berguna Kadangkala maklumat yang dikembalikan oleh beberapa antara muka latar belakang adalah dalam format rentetan dan mempunyai kebolehbacaan yang lemah Pada masa ini, adalah lebih baik jika terdapat kaedah yang boleh memformat dan menyerlahkan rentetan json lihat pemformatan dan penyerlahan rentetan json yang dilengkapkan dengan ungkapan biasa

Langkah pertama ialah menukar input Jika ia adalah objek, ia ditukar menjadi rentetan json standard. , dan kemudian ditukar menjadi rentetan json sekali lagi. Di mana json adalah input.

Salin kod Kod adalah seperti berikut:

if (jenis json !== 'rentetan') {
json = JSON.stringify(json);
} lain {
json = JSON.parse(json);
json = JSON.stringify(json);
}

Selepas menyeragamkan data, tandai rentetan untuk pembahagian dan penggabungan semula seterusnya

Terdapat beberapa tempat di mana anda perlu menambah teg, termasuk kurungan, kurungan dan koma saya menggunakan pemisah baris di sini. n (dengan cara ini kesannya akan kelihatan lebih baik apabila diuji di bawah baris arahan).

Salin kod Kod adalah seperti berikut:

//Tambah baris baharu sebelum dan selepas pendakap
reg = /([{}])/g;
json = json.replace(reg, 'rn$1rn');
// Tambah pemisah baris sebelum dan selepas kurungan segi empat sama
reg = /([[]])/g;
json = json.replace(reg, 'rn$1rn');
// Tambahkan baris baharu selepas koma
reg = /(,)/g;
json = json.replace(reg, '$1rn');

Selepas menambah tanda siap, anda perlu melakukan beberapa pemprosesan pengoptimuman, mengalih keluar pemisah baris tambahan dan mengalih keluar pemisah baris sebelum koma Ini adalah untuk mengelakkan rentetan kosong semasa pembahagian dan membazirkan satu gelung selepas kolon. Lihat Nampak lebih cantik.

Salin kod Kod adalah seperti berikut:

//Alih keluar pemisah baris yang berlebihan
reg = /(rnrn)/g;
json = json.replace(reg, 'rn');
// Alih keluar baris baharu sebelum koma
reg = /rn,/g;
json = json.replace(reg, ',');
//Inden sebelum kolon
reg = /:/g;
json = json.replace(reg, ': ');

Langkah seterusnya ialah untuk memproses lebih lanjut rentetan yang diproses pada mulanya ini, saya akan menambah logik pada fungsi (indeks, nod) {} ​​untuk memproses setiap unit segmentasi, termasuk pemformatan lekukan dan mencantikkan.

Salin kod Kod adalah seperti berikut:

$.each(json.split('rn'), function(index, nod) {});

Pertama sekali, mari kita bercakap tentang lekukan Kaedah lekukan adalah sangat mudah Apabila menemui {, [simbol, lekukan meningkat sebanyak 1, dan apabila menemui }, ] simbol, lekukan berkurangan 1. Jika tidak, lekukan. jumlah tetap tidak berubah.

Salin kod Kod adalah seperti berikut:

//Apabila menghadapi {, [di sini, tahap lekukan meningkat sebanyak 1, apabila bertemu }, ], tahap lekukan berkurang sebanyak 1, dan apabila tidak ditemui, tahap lekukan kekal tidak berubah
if (node.match(/{$/) || node.match(/[$/)) {
inden = 1;
} else if (node.match(/}/) || node.match(/]/)) {
Jika (pad !== 0) {
         pad -= 1;
}
} lain {
inden = 0;
}

Selepas melengkapkan lekukan, sudah tiba masanya untuk mencantikkan kod yang diserlahkan di sini Seperti yang anda boleh lihat di bawah, apabila menyerlahkan unit tersegmen, peraturan biasa digunakan untuk menilai Jika ia sepadan dengan kurungan besar tandakan kelas objek, dan kurungan segi empat sama menandakan kelas tatasusunan, nama atribut dan nilai atribut Tambah peraturan CSS ini sekali gus Selepas penambahan selesai, ia boleh disambungkan.

Salin kod Kod adalah seperti berikut:

.ObjectBrace{color:#00AA00;font-weight:bold;}
.ArrayBrace{color:#0033FF;font-weight:bold;}
.PropertyName{color:#CC0000;font-weight:bold;}
.String{color:#007777;}
.Nombor{warna:#AA00AA;}
.Koma{color:#000000;font-weight:bold;}

Salin kod Kod adalah seperti berikut:

//Tambahkan penyerlahan kod
nod = node.replace(/([{}])/g,"<span class='ObjectBrace'>$1</span>");
nod = node.replace(/([[]])/g,"<span class='ArrayBrace'>$1</span>");
nod = node.replace(/(".*")(:)(.*)(,)?/g,"<span class='PropertyName'>$1</span>$2$3$4");
nod = node.replace(/"([^"]*)"(,)?$/g,"<span class='String'>"$1"</span><span class='Comma '>$2</span>");
nod = node.replace(/(-?d )(,)?$/g,"<span class='Nombor'>$1</span><span class='Comma'>$2< /span>");

Akhir sekali, mari kita lihat kod kaedah lengkap (di sini saya menggunakan perpustakaan kelas jquery), dan alamat ujian:

Untuk mencantikkan jsonstr, hanya gunakan APP.format(jsonstr) dan keluarkan terus ke teg <pre></pre>

Berikut ialah alamat ujian,

http://iforever.sinaapp.com/ Anda boleh masuk dan mencubanya dan melihat kod sumber lengkap

Salin kod Kod adalah seperti berikut:

<skrip>
var APP=function(){
      var format=function(json){
            var reg=null,
                   result='';
                  pad=0,
                   PADDING='                                                                        Jika (jenis json !== 'rentetan') {
                  json = JSON.stringify(json);
              } lain {
                  json = JSON.parse(json);
                  json = JSON.stringify(json);
            }
                                       // Tambah baris baharu sebelum dan selepas pendakap
            reg = /([{}])/g;
               json = json.replace(reg, 'rn$1rn');
                                                                   // Tambahkan baris baharu sebelum dan selepas kurungan segi empat sama
            reg = /([[]])/g;
               json = json.replace(reg, 'rn$1rn');
... koma
            reg = /(,)/g;
              json = json.replace(reg, '$1rn');
// Alih keluar lebihan perubahan
          reg = /(rnrn)/g;
              json = json.replace(reg, 'rn');
//Alih keluar baris baharu sebelum koma
             reg = /rn,/g;
               json = json.replace(reg, ',');
//Inden sebelum kolon
            reg = /:/g;
               json = json.replace(reg, ': ');
                           // Pisahkan json mengikut baris baharu dan proses setiap bahagian kecil
                 $.each(json.split('rn'), fungsi(indeks, nod) {
              var i = 0,
inden = 0,
                         padding = '';
                                    //Di sini, tahap lekukan meningkat sebanyak 1 apabila {, [ ditemui, }, ] ditemui, tahap lekukan dikurangkan sebanyak 1, dan apabila tidak ditemui, tahap lekukan kekal tidak berubah
Jika (node.match(/{$/) || node.match(/[$/)) {
inden = 1;
                       } jika tidak (node.match(/}/) || node.match(/]/)) {
Jika (pad !== 0) {
                           pad -= 1;
                 }
                    } lain {
inden = 0;
                }
                   //padding保存实际的缩进
                untuk (i = 0; i < pad; i ) {
                    padding = PADDING;
                }
                //添加代码高亮
                nod = node.replace(/([{}])/g,"<span class='ObjectBrace'>$1</span>");
                nod = node.replace(/([[]])/g,"<span class='ArrayBrace'>$1</span>");
                nod = node.replace(/(".*")(:)(.*)(,)?/g,"<span class='PropertyName'>$1</span>$2$3$4");
                nod = node.replace(/"([^"]*)"(,)?$/g,"<span class='String'>"$1"</span><span class='Comma '>$2</span>");
                nod = node.replace(/(-?d )(,)?$/g,"<span class='Nombor'>$1</span><span class='Comma'>$2< /span>");
                hasil = nod pelapik '<br>';
                pad = indent;
            });
            pulangkan hasil;
        };
        kembali {
            "format":format,
        };
    }();
</skrip>

怎么样，json字符串是不是美观了很多呢，超级实用吧，这么好的东东，当然不一不不小伙伴们。