Penguji Regex

Uji regular expression secara langsung, dalam JavaScript sungguhan

Regex tester gratis ini menyorot setiap kecocokan begitu Anda mengetik, memakai engine regex JavaScript sungguhan milik browser Anda — sehingga apa yang cocok di sini adalah persis apa yang akan cocok di kode frontend atau Node.js Anda. Aktifkan salah satu dari enam flag (g, i, m, s, u, y), dan pola yang tidak valid menampilkan pesan error engine sesungguhnya alih-alih gagal secara diam-diam.

Di bawah highlight langsung Anda mendapat daftar kecocokan lengkap — setiap kecocokan dengan posisinya plus semua capture group, bernomor dan bernama — dan panel replace yang mempratinjau substitusi dengan backreference $1, $<name>, dan $& saat Anda mengetik. Saat polanya sudah bekerja, klik Copy as JavaScript untuk mendapatkan kode siap tempel.

Alternatif yang fokus dari regex101.com dan regexr.com

Penguji kelas berat seperti regex101.com mendukung flavor PCRE, Python, Golang, dan .NET di samping JavaScript — berguna saat Anda membandingkan engine, tetapi sering lebih dari yang Anda butuhkan saat Anda hanya ingin men-debug pola JS. regexr.com menampilkan pola komunitas dan menyediakan panduan referensi. Keduanya membutuhkan navigasi lewat beberapa tab untuk berpindah dari hasil kecocokan ke preview replace.

Regex tester online ini menjawab tiga pertanyaan yang paling penting sehari-hari dalam satu layar bersih: apakah cocok, apa yang ditangkap, dan apa hasil dari replace-nya? Tanpa pemilihan flavor, tanpa akun, tanpa unggah. Berbeda dari regexpal.com (yang hanya menampilkan highlight) atau debuggex.com (yang berfokus pada diagram railway visual), alat ini menambahkan ekstraksi capture-group per kecocokan dan preview replace langsung dengan dukungan backreference.

Pola regex umum, satu klik jauhnya

Pustaka bawaan menyisipkan pola yang teruji dengan teks sampel yang realistis: alamat email, URL, alamat IPv4, tanggal ISO, waktu 24 jam, warna hex, slug URL, nomor telepon internasional, angka (integer/float) dan tag HTML. Masing-masing dimuat dengan contoh valid dan tidak valid sehingga Anda bisa melihat persis di mana batas-batas pola tersebut.

Ini adalah titik awal, bukan aturan mutlak — ubah langsung di tempat dan lihat highlight-nya merespons. Sampelnya sengaja menyertakan kasus edge (seperti 999.999.1.1 untuk IPv4) sehingga Anda belajar apa yang ditolak setiap pola, bukan hanya apa yang diterima. Ini jauh lebih cepat daripada menyalin pola dari Stack Overflow dan menebak-nebak apakah pola itu menangani kasus edge Anda.

Capture group, lookaround, dan keenam flag — didukung penuh

Regex JavaScript modern punya fitur yang kuat: named group (?<year>\d{4}), lookahead (?=…) dan lookbehind (?<=…), Unicode property escape dengan flag u, dan sticky matching dengan y. Penguji ini mendukung semuanya, karena alat ini adalah engine JavaScript. Panel kecocokan menguraikan setiap group per kecocokan sehingga logika ekstraksi bisa diverifikasi sekilas.

Demo flag m adalah favorit: dengannya, ^ dan $ menambatkan ke setiap baris teks uji Anda — tempel sebuah file log dan lihat pola ^ERROR menyorot setiap baris yang bermasalah. Aktifkan s agar . cocok dengan karakter newline di dalam string multiline tanpa akal-akalan. Setiap hasil yang Anda lihat di sini adalah hasil yang sama yang akan dihasilkan kode Anda.

Belajar regex lebih cepat dengan cheatsheet bawaan

Cheatsheet regex yang bisa dilipat ini mencakup token yang Anda pakai setiap hari — character class (\d \w \s), anchor (^ $ \b), quantifier (* + ? {n,m} dan bentuk lazy-nya), group, alternation, backreference, dan keempat lookaround. Biarkan tetap terbuka saat Anda bereksperimen; melihat efek sebuah token tersorot secara langsung adalah cara tercepat regex benar-benar melekat.

Mulai sederhana: cocokkan sebuah kata literal, tambahkan character class, lalu quantifier, lalu group. Lima menit umpan balik langsung di regex playground mengajarkan lebih banyak daripada satu jam membaca tabel sintaks. Berfungsi juga di mobile — tata letaknya menyesuaikan untuk layar lebih kecil, sehingga Anda bisa men-debug pola di iPhone atau Android tanpa perlu instal aplikasi apa pun.

NFA vs DFA: mengapa backtracking ada dan bagaimana itu bisa merugikan Anda

Hampir setiap engine regex bahasa pemrograman — JavaScript, Python, Ruby, Java, PHP — dibangun di atas Non-deterministic Finite Automaton (NFA). NFA mencoba setiap alternatif secara berurutan, mengingat di mana ia berada sehingga bisa backtrack dan mencoba jalur lain jika sebuah cabang gagal. Pendekatan ini memungkinkan fitur seperti backreference dan lookahead: Deterministic Finite Automaton (DFA) — engine yang dipakai alat seperti awk dan egrep — bisa menjamin pencocokan waktu linear tetapi tidak bisa mendukung konstruksi tersebut karena memproses setiap karakter tepat sekali tanpa memori pilihan sebelumnya.

Biaya dari pendekatan NFA adalah catastrophic backtracking. Ilustrasi klasiknya adalah pola (a+)+ yang diterapkan pada string seperti aaaaab. Group luarnya bisa membagi kecocokan dalam bisa memecah kecocokan dalam-nya dengan cara eksponensial sebelum menyimpulkan tidak ada kecocokan, membuat engine menjelajahi 2ⁿ jalur untuk string sepanjang n. Ini adalah mekanisme di balik serangan ReDoS (Regular Expression Denial of Service): sebuah server yang memvalidasi input pengguna dengan pola rentan bisa dibekukan oleh string yang dirancang khusus sepanjang beberapa ratus karakter. Perbaikannya adalah menghilangkan ambiguitas — pakai atomic group atau possessive quantifier di mana didukung, hindari quantifier bersarang pada karakter yang sama, dan lebih pilih negated character class (misalnya [^,]* alih-alih .*? sebelum sebuah koma) untuk memberi engine titik henti yang deterministik.

Menguji pola Anda terhadap input jahat yang disengaja itu mudah di penguji ini: tempel string panjang karakter berulang yang dirancang untuk ditolak pola Anda, beralih ke stepping karakter tunggal di DevTools browser Anda jika engine-nya hang, lalu refactor sampai penolakannya instan. Menemukan masalah ini di sini memakan waktu milidetik; menemukannya di produksi bisa memakan biaya downtime.

Lookahead dan lookbehind: cocok dengan konteks, tanpa mengonsumsi apa pun

Assertion lookaround memungkinkan Anda melampirkan kondisi ke sebuah kecocokan tanpa menyertakan teks sekitarnya dalam apa yang dikonsumsi engine. Positive lookahead (?=...) menyatakan 'posisi saat ini harus diikuti oleh ini'; negative lookahead (?!...) menyatakan 'TIDAK boleh diikuti oleh ini'. Bayangan cerminnya, positive lookbehind (?<=...) dan negative lookbehind (?<!...), memberlakukan batasan yang sama pada apa yang mendahului kecocokan. Karena lookaround bersifat zero-width — mereka menegaskan sebuah kondisi tetapi tidak memajukan kursor — mereka ideal saat Anda butuh konteks untuk memutuskan apakah akan mencocokkan tetapi tidak ingin konteks itu ditangkap atau dikonsumsi.

Dua kasus pemakaian konkret mengilustrasikan mengapa mereka sangat diperlukan. Validasi password sering mengharuskan sebuah string berisi setidaknya satu digit DAN setidaknya satu huruf. Alih-alih mendaftar setiap kombinasi, Anda menulis dua lookahead terpisah yang ditambatkan di awal: ^(?=.*\d)(?=.*[A-Za-z]).+$ — engine mengecek kedua kondisi di posisi nol sebelum berkomitmen pada sisa kecocokan. Ekstraksi harga menunjukkan lookbehind: untuk menarik nilai numerik dari teks seperti '€12.99' dan '$4.50' tanpa menangkap simbol mata uang, pakai (?<=[$€£])\d+\.\d{2}. Simbol itu harus ada tetapi tidak disertakan dalam apa yang dikembalikan match().

Engine V8 milik JavaScript telah mendukung lookbehind sejak Chrome 62 (2017), jadi aman dipakai di browser modern apa pun atau versi Node.js saat ini. Satu nuansa penting: di dalam lookbehind, pola dicocokkan dari kanan ke kiri, yang berarti beberapa pola kompleks berperilaku tak terduga — lookbehind panjang-variabel khususnya bisa menghasilkan hasil yang mengejutkan. Tempel pola Anda di sini dan periksa indeks mulai/akhir setiap kecocokan untuk memverifikasi posisi kursor berperilaku sesuai maksud Anda.

Named capture group dan non-capturing group

Secara default, setiap set tanda kurung dalam sebuah pola adalah numbered capture group — tanda kurung buka pertama adalah group 1, yang kedua adalah group 2, dan seterusnya. Ini bekerja baik untuk pola kecil tetapi menjadi rapuh begitu pola membesar: sisipkan sebuah group baru di dekat awal dan setiap referensi $2 di string replace Anda bergeser satu. Named capture group memecahkan ini. Di JavaScript dan sebagian besar bahasa kompatibel-PCRE Anda menulis (?<name>...); di Python Anda menulis (?P<name>...). Nilai yang ditangkap kemudian bisa diakses dengan nama alih-alih posisi: match.groups.year di JavaScript atau match.group('year') di Python. Pola tanggal seperti (?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2}) membuat maksud setiap group mendokumentasikan diri sendiri, bertahan dari refactor pola tanpa merusak kode hilir, dan memungkinkan Anda mereferensikan capture dalam sebuah replacement sebagai $<year>.

Saat Anda butuh pengelompokan untuk struktur atau alternation tetapi tidak berminat menangkap teks yang cocok, pakai non-capturing group (?:...). Ini berperilaku identik dengan capturing group untuk tujuan pencocokan tetapi tidak mengalokasikan slot dalam array kecocokan, yang menjaga penomoran group Anda tetap bersih dan menghemat sedikit memori engine per kecocokan. Pola seperti (?:https?|ftp):// mengelompokkan alternatif protokol tanpa mengotori daftar capture. Sebagai aturan praktis: pakai (?:...) kapan pun Anda mengelompok untuk presedensi atau alternation dan (?<name>...) kapan pun Anda berniat mengekstrak nilainya — simpan (...) polos hanya saat Anda butuh group bernomor untuk backreference cepat sekali pakai dalam sebuah replacement.

Panel kecocokan di penguji ini mendaftar setiap group bernomor dan bernama per kecocokan, membuatnya mudah memverifikasi logika ekstraksi Anda. Jika sebuah group menampilkan undefined, baik cabang yang berisinya tidak ikut serta dalam kecocokan (hasil normal dalam pola alternation) atau Anda tidak sengaja memakai non-capturing group padahal yang capturing yang dimaksud. Kedua kondisi ini langsung terlihat di sini sebelum Anda menerapkan pola ke kode.

Pola praktis umum yang layak diketahui

Pola tertentu muncul di hampir setiap codebase, dan memahami mengapa pola itu ditulis seperti itu sama pentingnya dengan menghafal sintaksnya. Email adalah contoh kanonik masalah yang secara menipu sulit: grammar lengkap dalam RFC 5321 mengizinkan karakter seperti +, kutip, dan bahkan spasi di bagian lokal, yang berarti regex yang benar-benar patuh akan mencapai ratusan karakter dan tetap gagal pada kasus edge. Solusi pragmatisnya adalah memvalidasi secara longgar — ^[^\s@]+@[^\s@]+\.[^\s@]+$ — dan memastikan keterkirimannya dengan mengirim pesan sungguhan. UUID (versi 4) andal dicocokkan dengan [0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12} (flag case-insensitive disarankan). Tanggal ISO 8601 seperti 2024-06-15 memakai \d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]) — alternation di setiap segmen memberlakukan rentang yang masuk akal secara kalender tanpa perlu parser.

Slug URL — string huruf kecil bertanda hubung dalam alamat web — adalah salah satu pola andal paling sederhana: ^[a-z0-9]+(?:-[a-z0-9]+)*$. Alamat IPv4 umum ditulis sebagai empat kelompok (?:25[0-5]|2[0-4]\d|[01]?\d\d?) digabung dengan titik yang di-escape; alternation di setiap oktet memberlakukan rentang 0–255 yang tidak bisa dilakukan \d{1,3} naif. Nomor telepon adalah kasus di mana regex adalah alat yang salah sebagai alat utama: format nomor bervariasi begitu drastis antar negara sehingga satu pola internasional menjadi tidak terkelola. Pendekatan yang disarankan adalah menghapus semua karakter non-digit dengan [^\d+], lalu memvalidasi panjang dan prefiks negara di kode. Nomor kartu kredit bisa diverifikasi checksum-nya di JavaScript dengan algoritma Luhn — sebuah regex bisa mengonfirmasi jumlah digit dan spasi tetapi tidak bisa memvalidasi jumlah Luhn, jadi pakai regex untuk membersihkan input dan sebuah fungsi singkat untuk memverifikasi keasliannya.

Pola-pola ini layak diinternalisasi bukan karena regex yang dihafal lebih cepat diketik, tetapi karena memahami struktur masing-masing — mengapa regex email melepaskan kepatuhan RFC penuh, mengapa regex IPv4 memakai alternation alih-alih \d{1,3} sederhana — mempertajam insting Anda tentang kapan regex adalah alat yang tepat versus kapan parser atau fungsi library yang tepat akan melayani Anda lebih baik. Muat salah satu dari pola ini dari pustaka bawaan, lalu dengan sengaja rusak dengan input kasus edge untuk melihat persis di mana batas setiap pola berada.