Hasil pencocokan yang lebih baik dengan String.prototype.matchAll()

Joe Medley

Chrome 73 memperkenalkan metode String.prototype.matchAll(). Perilaku ini mirip dengan match(), tetapi menampilkan iterator dengan semua ekspresi reguler yang cocok dalam ekspresi reguler global atau melekat. Hal ini menawarkan cara sederhana untuk mengiterasi kecocokan, terutama saat Anda memerlukan akses untuk menangkap grup.

Apa yang salah dengan match()?

Jawaban singkatnya bukanlah apa-apa, kecuali jika Anda mencoba menampilkan pencocokan global dengan grup penangkap. Ini dia teka-teki pemrograman untuk Anda. Perhatikan kode berikut:

const regex = /t(e)(st(\d?))/g;
const string = 'test1test2';
const results = string.match(regex);
console.log(results);
// → ['test1', 'test2']

Jalankan perintah ini di konsol dan perhatikan bahwa array yang berisi string 'test1' dan 'test2' akan ditampilkan. Jika saya menghapus penanda g dari ekspresi reguler, yang saya dapatkan akan memiliki semua grup tangkapan saya, tetapi saya hanya mendapatkan kecocokan pertama. Tampilannya terlihat seperti ini:

['test1', 'e', 'st1', '2', index: 0, input: 'test1test2', groups: undefined]

String ini berisi kemungkinan kecocokan kedua yang dimulai dengan 'test2', tetapi saya tidak memilikinya. Inilah teka-tekinya: bagaimana cara mendapatkan semua grup penangkap pertandingan untuk setiap pertandingan? Penjelasan untuk proposal String.prototype.matchAll() menunjukkan dua kemungkinan pendekatan. Saya tidak akan menjelaskannya karena mudah-mudahan Anda tidak akan membutuhkannya lagi.

String.prototype.matchAll()

Seperti apa contoh penjelasannya pada matchAll()? Saksikan sendiri.

const regex = /t(e)(st(\d?))/g;
const string = 'test1test2';
const matches = string.matchAll(regex);
for (const match of matches) {
  console.log(match);
}

Ada beberapa hal yang perlu diperhatikan tentang hal ini. Tidak seperti match() yang menampilkan array pada penelusuran global, matchAll() menampilkan iterator yang berfungsi baik dengan loop for...of. Iterator ini menghasilkan array untuk setiap kecocokan, termasuk grup penangkap dengan beberapa tambahan. Jika Anda mencetaknya ke konsol, tampilannya akan terlihat seperti ini:

['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', groups: undefined]
['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', groups: undefined]

Anda mungkin melihat bahwa nilai untuk setiap kecocokan adalah array dalam format yang sama persis seperti yang ditampilkan oleh match() untuk ekspresi reguler non-global.

Materi bonus

Hal ini terutama bagi orang-orang yang baru menggunakan ekspresi reguler atau bukan ahli dalam ekspresi reguler. Anda mungkin telah melihat bahwa hasil match() dan matchAll() (untuk setiap iterasi) adalah array dengan beberapa properti bernama tambahan. Saat menyiapkan artikel ini, saya melihat bahwa properti ini memiliki beberapa kekurangan dokumentasi di MDN (yang telah saya perbaiki). Berikut deskripsi singkatnya.

index

Indeks hasil pertama dalam string asli. Pada contoh di atas, test2 dimulai pada posisi 5, sehingga index memiliki nilai 5.

input

String lengkap yang digunakan untuk menjalankan matchAll(). Dalam contoh saya, itu adalah 'test1test2'.

groups

Berisi hasil dari grup tangkapan bernama yang ditentukan dalam ekspresi reguler Anda.

Kesimpulan

Jika ada yang terlewatkan, beri tahu kami melalui komentar di bawah. Anda dapat membaca selengkapnya tentang perubahan terbaru pada JavaScript dalam update sebelumnya atau di situs V8.