Rekam penggunaan dua ekspresi reguler

Kemarin saya menemui kendala dalam mencocokkan dua ekspresi reguler saat melakukan mergeCSS, yang juga memakan banyak waktu. Akhirnya, dengan bantuan teman sekelas CE di CSS Forest Group, saya menyelesaikan dua ekspresi reguler ini secara khusus dan mungkin menggunakannya di masa depan tiba.

Yang pertama adalah masalah pencocokan jalur gambar. String yang akan diproses adalah:

 background:url(demo.jpg);background-image:url(demo.gif);

Yang awalnya saya tulis adalah:

 url((.*))

Hasilnya adalah:

 url(demo.jpg);background-image:url(demo.gif);

Seperti yang Anda lihat, hasil mencocokkan dua gambar menjadi satu tidak seperti yang Anda harapkan. Ubah menjadi pencocokan malas sebagai berikut:

 url((.*?))

Hasilnya adalah:

Dua gambar dicocokkan, yang merupakan hasil yang diinginkan. :)

Masalah kedua adalah penggunaan variabel dalam ekspresi reguler. Mari kita jelaskan secara singkat mengapa menambahkan variabel juga bisa menjadi masalah. Pertama-tama mari kita lihat deskripsi objek RegExp dan metode replace() :

 /正则表达式/匹配模式

Semua konten di antara "/" akan diperlakukan sebagai ekspresi reguler, sehingga nama variabel akan diperlakukan sebagai string. Tanpa menambahkan "/"? Tidak apa-apa, tetapi jika Anda tidak menambahkan "/", Anda tidak dapat menentukan mode pencocokan, dan Anda hanya dapat mencocokkan yang pertama.

Kemudian:

 new RegExp("url\((" + 变量名+ ")\)", "g");

Yang perlu diperhatikan disini adalah menggunakan "\" untuk escape, karena

Selama proses ini "\" akan diubah menjadi "", yaitu hasil di atas adalah:

 /url((变量内容))/g