Diagram Railroad Regex

Cara memvisualisasikan regular expression

1. Ketik atau tempel pola Anda di Regular expression. Anda juga bisa menempelkan literal JavaScript lengkap seperti /^\d{3}-\d{4}$/gm: garis miring akan dihapus dan flag otomatis dipindahkan ke kotak flag.
2. Tambahkan flag jika perlu (salah satu dari d g i m s u v y). Flag mengubah cara beberapa bagian digambar: dengan m, ^ dan $ menjadi “awal baris” dan “akhir baris”; dengan s, titik menjadi “karakter apa pun”.
3. Diagram diperbarui saat Anda mengetik. Gambar diagram menggambar ulang sesuai permintaan, dan Contoh berikutnya menampilkan bergantian beberapa pola umum (email, nomor telepon, warna hex, harga, tag HTML, URL).
4. Baca diagram dari kiri ke kanan, dari titik penuh ke titik bercincin. Setiap jalur yang bisa Anda ikuti adalah string yang bisa dicocokkan oleh pola tersebut.
5. Gunakan Unduh SVG untuk gambar vektor yang tajam (dokumentasi, slide), Unduh PNG untuk gambar beresolusi ganda, atau Salin kode SVG untuk menempelkan markup-nya ke halaman web.

Arahkan kursor ke sebuah kotak untuk melihat bagian pola asalnya beserta posisinya.

Cara membaca diagram railroad

Diagram railroad, juga disebut diagram sintaksis, menggambarkan sebuah tata bahasa sebagai kumpulan jalur rel. Regular expression adalah tata bahasa semacam itu, sehingga gambarnya menunjukkan struktur jauh lebih baik daripada sebaris simbol yang padat:

• Kotak biru adalah teks literal yang harus muncul persis seperti ditulis, misalnya “@”.
• Kotak hijau adalah jenis karakter (\d digit, \w karakter kata, . karakter apa pun…) dan kelas karakter. Kelas seperti [\w.+-] menjadi kotak berjudul “salah satu dari” yang mencantumkan setiap elemennya; kelas negasi [^…] berwarna merah dan berjudul “bukan salah satu dari”.
• Pil ungu adalah anchor dan batas: awal dan akhir teks atau baris, serta batas kata \b. Elemen ini mencocokkan posisi, bukan karakter.
• Kotak oranye putus-putus adalah back-reference seperti \1 atau \k<name>: teks yang sama dengan yang dicocokkan sebuah grup sebelumnya.
• Bingkai putus-putus adalah grup. Grup penangkap diberi nomor sesuai urutan kurung bukanya (“grup #2 “domain””); grup non-penangkap (?:…) tidak dibingkai. Lookahead dan lookbehind mendapat bingkai merah muda berlabel “diikuti oleh” atau “didahului oleh”, karena keduanya memeriksa teks tanpa mengonsumsinya.
• Jalur paralel adalah alternatif yang dipisahkan |.
• Jalur di atas sebuah elemen memungkinkan Anda melewatinya (?, *, {0,n}). Jalur di bawah dengan panah berputar kembali untuk mengulanginya (+, *, {n,m}). Jumlah selain yang biasa ditulis di bawah loop, misalnya “2 hingga 5 kali”, dan kuantifier lazy (+?, *?) ditandai “lazy”.

Pesan kesalahan dengan posisi

Pola diperiksa oleh mesin regular expression JavaScript milik browser Anda sendiri, sehingga apa yang diterima alat ini persis sama dengan yang diterima new RegExp() dengan flag yang sama. Saat mesin menolaknya, alat ini menunjuk karakter yang bermasalah beserta posisinya dan tanda caret di bawah pola. Alat ini mengenali ) tanpa pasangan, grup yang tidak pernah ditutup, kelas karakter yang kehilangan ], kuantifier tanpa sesuatu untuk diulang (*a, a|+), backslash tunggal di akhir, dan kuantifier {n,m} dengan n lebih besar daripada m. Kesalahan lain, seperti back-reference ke nama grup yang tidak ada, ditampilkan dengan pesan dari browser.

Ekspresi hanya dikompilasi untuk memvalidasinya: ekspresi tidak pernah dijalankan terhadap teks apa pun, dan tidak ada yang keluar dari browser Anda.