Regular Expression, sering ditulis/disebut juga Regex / Regexp, adalah deretan karakter spesial yang mendefinisikan sebuah pola dalam pencarian teks. Bisa dibilang Regex itu seperti wildcard tapi lebih pintar, top markotop lah.
Setiap bahasa pemrograman menyediakan Regex engine yang berbeda. Engine di Java ga sama dengan PHP, beda juga dengan JavaScript. Karena beda engine, belum tentu ekspresi Regex yang disupport oleh satu bahasa juga disuport bahasa yang lain. Biarpun begitu, sintaks Regex tetep sama di mana-mana.
Dalam artikel ini kita akan kenalan dengan Regex dalam JavaScript. Dibanding Java & PHP, regex dalam JavaScript bisa dibilang terbatas. Artinya, semua regex dalam JavaScript pasti bisa dikopi ke dalam program Java & PHP tapi ga semua regex di Java & PHP bisa dipake di JavaScript.
Kenapa pake Regex? Regex menyederhanakan pencarian teks. Memang untuk pencarian sederhana kita bisa pake fungsi-fungsi String dan Array seperti substr(), indexOf(), slice(), dll tapi kalo pencariannya rumit, jauh lebih enak kalo pake Regex. Contohnya begini, misalnya kita mau menghitung banyaknya “ku” , “Ku”, “Kau”, dan “kau” dalam lirik lagunya Andra & The Backbone.
Kau begitu sempurna Di mataku kau begitu indah Kau membuat diriku akan slalu memujimu Di setiap langkahku Ku kan slalu memikirkan dirimu Tak bisa kubayangkan hidupku tanpa cintamu Janganlah kau tinggalkan diriku Takkan mampu menghadapi semua Hanya bersamamu ku akan bisa Kau adalah darahku Kau adalah jantungku Kau adalah hidupku Lengkapi diriku Oh sayangku, kau begitu Sempurna.. Sempurna.. Kau genggam tanganku Saat diriku lemah dan terjatuh Kau bisikkan kata dan hapus semua sesalkuPake Regex, cukup begini bisa ketemu hasilnya ada 26 :
/(ka?u)/giKalo mau silakan coba hitung pake fungsi-fungsi String dan Array 🙂
RegEx di JavaScript
Ada dua cara untuk bikin regex di JavaScript. Kita bisa bikin objek /(ka?u)/gi 2 atau pake string biasa.
JS Bin on jsbin.com
Regex biasanya dipake untuk fungsi-fungsi String seperti /(ka?u)/gi 4, /(ka?u)/gi 5, /(ka?u)/gi 6. Tapi Regex juga punya fungsi sendiri yang juga sering dipake seperti /(ka?u)/gi 7 & /(ka?u)/gi 8.
Contoh kode di artikel ini semuanya saya tulis di JSBin. Silakan langsung utak-atik kodenya & klik tombol “Run”.
Dalam contoh kode di atas, /(ka?u)/gi 9 adalah ekspresi yang berisi token dan modifier. Tokennya adalah /<pola yang dicari>/<modifier> 0 yang artinya “sebarang angka”. /<pola yang dicari>/<modifier> 1 adalah modifier yang berarti “cari semuanya, jangan berenti di angka pertama”. Kalo ga pake /<pola yang dicari>/<modifier> 1, outputnya cuman angka “1”. Jadi kalo kita nulis regex, pola yang kita cari harus ditulis di antara dua garis miring dan flag setelah garis miring terakhir.
/<pola yang dicari>/<modifier>Pola yang dicari bisa berisi token dan/atau teks biasa. Tergantung kebutuhan. Kalo cuman untuk cari kata “hijau” dalam lagu “Balonku”, kita ga perlu pake token, bisa langsung pake kata yang dicari , /<pola yang dicari>/<modifier> 3.
Modifier
JavaScript nyediain 3 modifier yang bisa kita pake yaitu :
- /<pola yang dicari>/<modifier> 1 : global, cari semua yang cocok.
- /<pola yang dicari>/<modifier> 5 : ignore case, huruf besar & huruf kecil sama aja
- /<pola yang dicari>/<modifier> 6 : multiline, cari di semua baris teks, jangan berenti biarpun ketemu karakter line-break.
Kita coba apa gunanya /<pola yang dicari>/<modifier> 1.
JS Bin on jsbin.com
Kalo kita ingin cari teks dalam semua baris, kita gabungin /<pola yang dicari>/<modifier> 1 & /<pola yang dicari>/<modifier> 6. Selain itu, kita perlu pake karakter yang disebut anchor penanda awal atau akhir baris, hello.jpg hello.png dog.png pic1.png pic2.png pic3a.gif pic4.jpg helloboy.gif 0 atau hello.jpg hello.png dog.png pic1.png pic2.png pic3a.gif pic4.jpg helloboy.gif 1.
JS Bin on jsbin.com
Ekspresi hello.jpg hello.png dog.png pic1.png pic2.png pic3a.gif pic4.jpg helloboy.gif 2 dalam kode di atas artinya “Cari ba mulai dari awal baris“. Tapi karena kita pake /<pola yang dicari>/<modifier> 6, ekspresi tersebut berubah jadi “Cari ba mulai dari awal semua baris“.
Token
Token Regex dikelompokkan berdasar fungsinya. Ada yg dipake untuk definisi jenis karakter, untuk nentuin batas, dll. Daftar lengkapnya silakan baca sendiri di MDN .
Character Class : Dot (.), \d, \D, \w, \W, \s
Token dalam kelompok ini mendefinisikan jenis karakter.
TokenArtinyahello.jpg hello.png dog.png pic1.png pic2.png pic3a.gif pic4.jpg helloboy.gif 4Sebarang karakter/<pola yang dicari>/<modifier> 0Sebarang angka, 1 digit, 0 – 9hello.jpg hello.png dog.png pic1.png pic2.png pic3a.gif pic4.jpg helloboy.gif 6Sebarang karakter yang bukan angkahello.jpg hello.png dog.png pic1.png pic2.png pic3a.gif pic4.jpg helloboy.gif 7Sebarang angka atau huruf kecil & besar termasuk underscorehello.jpg hello.png dog.png pic1.png pic2.png pic3a.gif pic4.jpg helloboy.gif 8Sebarang karakter yang bukan huruf, angka, atau underscorehello.jpg hello.png dog.png pic1.png pic2.png pic3a.gif pic4.jpg helloboy.gif 9Karakter whitespace, spasi, tab, line-breakToken hello.jpg hello.png dog.png pic1.png pic2.png pic3a.gif pic4.jpg helloboy.gif 4 artinya sebarang karakter kecuali line-break (022 123-456-2322 021 123-456-2322 031 123-456-2377 041 123-456-2322 021 555-456-2322 031 555-456-2322 0341 555-456-2322 021 123-456-2377 0341 123-456-2377 0341 123-021-2377 0341 123-031-2377 1 , 022 123-456-2322 021 123-456-2322 031 123-456-2377 041 123-456-2322 021 555-456-2322 031 555-456-2322 0341 555-456-2322 021 123-456-2377 0341 123-456-2377 0341 123-021-2377 0341 123-031-2377 2).
JS Bin on jsbin.com
Gimana kalo kita ingin cari tanda titik? Kita perlu pake 022 123-456-2322 021 123-456-2322 031 123-456-2377 041 123-456-2322 021 555-456-2322 031 555-456-2322 0341 555-456-2322 021 123-456-2377 0341 123-456-2377 0341 123-021-2377 0341 123-031-2377 3 di depan titik, jadi tanda titiknya dianggap karakter bukan token regex. Contohnya begini,
JS Bin on jsbin.com
Contoh untuk Character class lainnya:
JS Bin on jsbin.com
Character Set
Token ini mendefinisikan sekelompok karakter yang ingin kita cari. Sintaksnya pake kurung siku 022 123-456-2322 021 123-456-2322 031 123-456-2377 041 123-456-2322 021 555-456-2322 031 555-456-2322 0341 555-456-2322 021 123-456-2377 0341 123-456-2377 0341 123-021-2377 0341 123-031-2377 4. Set bisa berisi pilihan beberapa karakter atau range seperti huruf a-z , angka 1-100, dll.
JS Bin on jsbin.com
Tanda karet hello.jpg hello.png dog.png pic1.png pic2.png pic3a.gif pic4.jpg helloboy.gif 0 di baris terakhir adalah negasi, jadi regexnya berarti semua karakter yang bukan angka 0 – 9.
Alternation
Ini token sederhana, 022 123-456-2322 021 123-456-2322 031 123-456-2377 041 123-456-2322 021 555-456-2322 031 555-456-2322 0341 555-456-2322 021 123-456-2377 0341 123-456-2377 0341 123-021-2377 0341 123-031-2377 6. Fungsinya mirip dengan pencabangan 022 123-456-2322 021 123-456-2322 031 123-456-2377 041 123-456-2322 021 555-456-2322 031 555-456-2322 0341 555-456-2322 021 123-456-2377 0341 123-456-2377 0341 123-021-2377 0341 123-031-2377 7. Kalo satu pola ga ketemu, cari pola satunya.
JS Bin on jsbin.com
Boundary / Anchor
Token boundary mendefinisikan batas awal/akhir teks yang diproses.
JS Bin on jsbin.com
Quantifier
Quantifier menentukan berapa banyak karakter yang dicari.
TokenArtinyaString10 atau lebih, sebanyak-banyaknyaString21 atau lebih, sebanyak-banyaknyaString3minimal m , maksimal nString40 atau 1JS Bin on jsbin.com
Group
Group memungkinkan kita membuat kelompok ekspresi yang akan diproses secara terpisah dari ekspresi lainnya dalam satu regex yang sama. Regex yang dijalankan dalam sebuah grup ditulis dalam tanda kurung.
Misalnya kita punya daftar file seperti ini:
hello.jpg hello.png dog.png pic1.png pic2.png pic3a.gif pic4.jpg helloboy.gifJS Bin on jsbin.com
Selain fungsi di atas, group juga memungkinkan kita mengakses hasil regex setiap grup sebagai sebuah variabel untuk diproses lagi di program kita. Untuk mengakses hasil regex sebagai variabel, kita perlu pake fungsi /(ka?u)/gi 8. Contohnya,
JS Bin on jsbin.com
Kita lihat hasil /(ka?u)/gi 8 adalah sebuah String7 & hasil regex masing-masing group bisa diakses lewat nomor indeks sesuai urutan grup dalam regex.
Negative Lookahead
Contoh group di atas pake ekspresi yang namanya Positive Lookahead. Artinya, teks yang dicari dalam grup harus ketemu. Negative Lookahead adalah kebalikannya, teks/pola dalam group ga boleh ada.
JS Bin on jsbin.com
Ya gitu deh tentang Regex, tutorialnya cukup sekian. Kalo mau lanjut silakan kerjain latihan soal di bawah 🙂