Penguji Regex — Penguji ekspresi reguler JavaScript online _

Bagaimana regex bekerja di browser Anda?

Setiap runtime JavaScript membawa mesin ekspresi reguler bawaan — new RegExp(pattern, flags) mengkompilasi pola Anda, lalu metode seperti String.prototype.match, String.prototype.replace, dan RegExp.prototype.exec menjalankannya pada string masukan apa pun. Penguji ini membungkus mesin tersebut dalam antarmuka sehingga Anda dapat mengedit, menjalankan, dan memeriksa pola tanpa meninggalkan browser. Tidak ada yang Anda ketik — pola, bendera, string uji, atau penggantian — yang dikirim melalui jaringan.

Bagaimana cara kerja penguji regex?

Pipeline terdiri dari beberapa langkah singkat, semuanya berjalan di sisi klien pada setiap tombol ditekan (dengan debouncing 150 ms agar pengetikan tetap lancar):

1. Badan pola Anda dibaca dari kolom di atas (tanpa pembatas / di awal atau akhir — itu dekoratif). Pil-pil bendera yang dipilih digabungkan menjadi string bendera seperti gi atau gimsuy.
2. new RegExp(patternBody, flags) mengkompilasi pola. Jika mesin melempar SyntaxError (misalnya tanda kurung tidak berpasangan atau escape tidak valid), pesan ditampilkan di atas string uji dan daftar kecocokan dikosongkan. Kesalahan kompilasi adalah err.message nyata dari V8 / SpiderMonkey / JavaScriptCore, jadi sesuai dengan yang akan Anda lihat di DevTools.
3. Untuk daftar kecocokan, penguji selalu menghitung dengan bendera global sintetik — jadi meskipun Anda mematikan g, daftarnya tetap menampilkan setiap kecocokan. Pengaman standar terhadap kecocokan lebar-nol (if (m.index === rx.lastIndex) rx.lastIndex++) mencegah loop berputar pada pola yang cocok dengan string kosong. Mode Ganti menghormati set bendera Anda yang sebenarnya sehingga $& berperilaku sama seperti String.prototype.replace.
4. Di antara setiap iterasi, penguji memeriksa performance.now() - start dan dibatalkan setelah 50 ms berlalu. Ini melindungi dari backtracking katastrofik pada masukan seperti (a+)+$ terhadap deretan panjang a — tab jika tidak akan macet. Pengaman bersifat best-effort: pola patologis dengan kecocokan tunggal masih bisa menghabiskan waktu di dalam satu pemanggilan exec. Jika itu terjadi, segarkan tab dan tulis ulang pola dengan kuantifier tidak rakus atau gaya posesif atomik (mis. [^x]*x).
5. String uji dibagi menjadi segmen pada rentang setiap kecocokan dan segmen yang cocok dibungkus dalam elemen <mark class="rx-match rx-cap-N">, di mana N berputar melalui enam warna palet sehingga kecocokan yang berdekatan mudah dibedakan sekilas. Grup bernomor (m[1], m[2], …) dan grup bernama (m.groups) dari setiap kecocokan dirender sebagai baris berlabel di bawahnya; jika bendera d diatur, indeks [start, end] per grup juga ditampilkan.

Mengapa menggunakan penguji regex ini?

• Privasi: setiap pola, string uji, dan penggantian berjalan di browser Anda menggunakan mesin JavaScript RegExp bawaan. Tidak ada yang meninggalkan tab — penting saat masukan adalah log pelanggan, pola kredensial bocor, atau hal lain yang tidak akan Anda tempel ke playground regex SaaS yang dihost.
• Rasa jujur: penguji mengekspos persis mesin regex yang dijalankan Node.js, Chrome, Safari, Firefox, dan setiap validator formulir berbasis browser. Tidak ada lapisan terjemahan rasa Perl untuk menyembunyikan perbedaan halus — yang berfungsi di sini berfungsi di kode Anda.
• Debug penangkapan dan grup bernama: setiap grup bernomor ($1, $2, …) dan grup bernama ($<year>) ditampilkan per kecocokan sehingga Anda dapat membangun parser dan membaca slot tanpa menebak. Mode Ganti memungkinkan Anda mencampur grup secara bebas — $2-$1 menukar dua slot pertama, $<name> menyisipkan slot bernama, dan $& menggemakan seluruh kecocokan.
• Pengaman backtracking katastrofik: plafon 50 ms pada enumerasi membatalkan pola patologis seperti (a+)+$ sebelum membekukan tab. Anda melihat pesan kesalahan penjelas alih-alih browser yang macet, dan halaman pulih segera.

Apa aplikasi umum dari penguji regex?

Ekspresi reguler muncul di pengembangan web, keamanan, dan pekerjaan data — penguji ini menargetkan kasus penggunaan paling umum:

• Validasi formulir: prototipekan pola email, telepon, atau kode pos, tempelkan masukan sampel ke string uji, dan konfirmasikan bahwa setiap kasus positif cocok dan setiap kasus negatif tidak cocok sebelum Anda mengirim pola ke kode produksi.
• Scraping log: tempelkan potongan keluaran NGINX, aplikasi, atau log audit, tulis pola dengan grup bernama untuk bagian yang Anda pedulikan ((?<ip>…) (?<path>…)) dan baca slot yang ditangkap per kecocokan untuk mengonfirmasi parser Anda benar.
• Cari-dan-ganti untuk refaktor: gunakan mode Ganti untuk menulis ulang identifier di sebuah cuplikan — (\w+)\.set(\w+)\( → $1.$2 = mengubah panggilan setter menjadi penugasan properti, dan pratinjau langsung menampilkan hasilnya sebelum Anda menerapkannya di codemod.

Seperti apa contoh regex?

Ambil pola (\d{4})-(\d{2})-(\d{2}) dengan bendera g, dijalankan pada string uji release 2025-11-15, prerelease 2026-05-25. Mesin menemukan dua kecocokan. Kecocokan pertama adalah 2025-11-15 dengan grup 1 = 2025, grup 2 = 11, grup 3 = 15. Kecocokan kedua adalah 2026-05-25 dengan bentuk grup yang sama. Pada mode Ganti, template penggantian $3/$2/$1 menulis ulang kedua tanggal menjadi 15/11/2025 dan 25/05/2026 — konversi ISO ke DMY dengan satu pola yang dapat Anda verifikasi secara visual sebelum menyambungkan pola ke skrip.

Gunakan penguji ini sebagai jalur cepat untuk pekerjaan regex apa pun — membangun, men-debug, atau menulis ulang pola. Semuanya berjalan secara lokal; tidak ada yang dicatat; mesin regex adalah yang dibawa browser Anda, jadi perilakunya cocok dengan apa yang akan dilihat kode produksi saat runtime.