Visualizer Regex

• Diagram Rel Interaktif: Lihat ekspresi reguler Anda dirender sebagai diagram rel/sintaks profesional secara real time. Setiap token — literal, grup, kuantifier, alternasi, dan lookahead — ditampilkan sebagai jalur visual yang bisa ditelusuri.
• Rincian AST dengan Pohon Token: Jelajahi pohon sintaks abstrak yang bisa dilipat dan menampilkan setiap node yang diurai — sekuens, alternasi, grup bernama, kuantifier, referensi balik — dengan deskripsi yang mudah dipahami untuk menunjukkan persis apa fungsi setiap bagian regex Anda.
• Pengujian Kecocokan Langsung dengan Penyorotan: Tempel string uji dan lihat kecocokan tersorot seketika. Tabel grup penangkap menampilkan setiap kecocokan beserta nilai grup bernomor dan bernamanya, membantu Anda memverifikasi kebenaran sebelum pola dipakai di produksi.
• 100% Gratis — Tanpa Daftar, Tanpa Server: Semua penguraian, pembuatan diagram, dan evaluasi kecocokan berjalan langsung di browser Anda memakai mesin regex bawaan JavaScript. Tidak ada data yang meninggalkan perangkat Anda, sehingga alat ini aman untuk pola sensitif seperti aturan autentikasi atau validator data pribadi.

• Debugging Pola: Langsung temukan grup yang tidak berpasangan, jebakan kuantifier greedy, dan masalah urutan alternasi tanpa menjalankan kode, cukup dengan memeriksa diagram visualnya.
• Tinjauan Kode: Bagikan tautan ke regex yang divisualisasikan saat tinjauan pull request agar peninjau dapat memverifikasi maksudnya tanpa harus membaca rangkaian escape mentah.
• Audit Keamanan: Audit pola validasi input terhadap risiko backtracking katastrofik (ReDoS). Pohon AST membuat kuantifier bersarang dan alternasi ambigu langsung terlihat.
• Belajar Ekspresi Reguler: Pemula dapat mengetik pola sederhana lalu menambahkan fitur secara bertahap, sambil melihat persis bagaimana setiap kelas karakter, kuantifier, atau grup memengaruhi diagram.
• Pembuatan Dokumentasi: Ekspor atau tangkap diagram rel untuk dokumentasi API, wiki, atau artikel teknis guna menjelaskan logika validasi rumit tanpa teks panjang.
• Pengujian Multi-Platform: Uji perilaku pola terhadap beberapa string contoh sekaligus dan verifikasi ekstraksi grup penangkap bernama yang dipakai dalam perutean URL, parser log, atau pemisah CSV.

Diagram rel (atau sintaks) memvisualisasikan tata bahasa formal sebagai sekumpulan jalur. Pola dibaca dari kiri ke kanan: setiap token adalah kotak berlabel yang dihubungkan garis. Saat ada pilihan (alternasi via | ), jalur terbelah secara vertikal lalu menyatu kembali setelah alternatifnya. Saat token bersifat opsional atau berulang, busur putaran digambar di atas elemen untuk menandakan kuantifier. Ini sesuai dengan model mental yang dipakai sebagian besar pengembang saat menalar regex: dari kiri ke kanan, dengan percabangan untuk pilihan dan putaran untuk pengulangan.

Di samping diagram, tab Rincian AST menampilkan pohon sintaks abstrak lengkap yang diurai dari pola Anda. Setiap node punya tipe (Sekuens, Alternasi, Grup, Kuantifier, Literal, Kelas Karakter, Escape, Jangkar, Referensi Balik) dan deskripsi yang mudah dipahami. Pohonnya sepenuhnya bisa dilipat, jadi Anda bisa fokus pada subpola tertentu tanpa kehilangan konteks.

Tab Uji & Cocokkan memungkinkan Anda menempelkan input contoh dan langsung melihat bagian string mana yang cocok dengan pola Anda. Kecocokan disorot inline, dan tabel grup penangkap menampilkan setiap grup bernomor dan bernama yang diekstrak dari setiap kecocokan — data yang sama yang diterima kode aplikasi Anda saat memanggil String.prototype.matchAll() atau RegExp.prototype.exec() .

Visualizer ini mendukung seluruh fitur regex ECMAScript, termasuk kelas karakter ( [a-z] , [^0-9] ), escape singkat ( \d , \w , \s ), jangkar ( ^ , $ , \b ), grup penangkap dan bukan penangkap, grup bernama via , lookahead ( (?=…) , (?!…) ), lookbehind ( (?<=…) , (?<!…) ), referensi balik ( \1 , \k<nama> ), dan semua kuantifier termasuk varian lazy ( *? , +? , ?? ).