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

Joe Medley

Chrome 73 memperkenalkan metode String.prototype.matchAll(). Fungsi ini berperilaku serupa dengan match(), tetapi menampilkan iterator dengan semua pencocokan ekspresi reguler dalam ekspresi reguler global atau melekat. Hal ini menawarkan cara sederhana untuk mengulangi kecocokan, terutama saat Anda memerlukan akses untuk mengambil grup.

Apa yang salah dengan match()?

Jawaban singkatnya adalah tidak ada, kecuali jika Anda mencoba menampilkan kecocokan global dengan grup pengambilan. Berikut adalah teka-teki pemrograman untuk Anda. Pertimbangkan kode berikut:

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

Jalankan ini di konsol dan perhatikan bahwa kode ini menampilkan array yang berisi string 'test1' dan 'test2'. Jika saya menghapus tanda g dari ekspresi reguler, yang saya dapatkan memiliki semua grup pengambilan, 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. Sekarang, inilah teka-tekinya: bagaimana cara mendapatkan semua grup pengambilan untuk setiap kecocokan? Penjelasan untuk proposal String.prototype.matchAll() menunjukkan dua kemungkinan pendekatan. Saya tidak akan menjelaskannya karena semoga Anda tidak akan membutuhkannya lagi.

String.prototype.matchAll()

Seperti apa contoh penjelasan dengan 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 terkait hal ini. Tidak seperti match() yang menampilkan array pada penelusuran global, matchAll() menampilkan iterator yang berfungsi dengan baik dengan loop for...of. Iterator menghasilkan array untuk setiap kecocokan, termasuk grup pengambilan 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 dengan yang ditampilkan oleh match() untuk ekspresi reguler non-global.

Materi bonus

Panduan ini terutama ditujukan untuk orang yang baru mengenal ekspresi reguler atau yang tidak mahir dalam hal ini. 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, nilainya adalah 'test1test2'.

groups

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

Kesimpulan

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