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 sesalku
Pake Regex, cukup begini bisa ketemu hasilnya ada 26 :
/(ka?u)/gi
Kalo 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 RegExp atau pake string biasa.
Regex biasanya dipake untuk fungsi-fungsi String seperti match(), search(), replace(). Tapi Regex juga punya fungsi sendiri yang juga sering dipake seperti test() & exec().
Contoh kode di artikel ini semuanya saya tulis di JSBin. Silakan langsung utak-atik kodenya & klik tombol “Run”.
Dalam contoh kode di atas, /\d/g adalah ekspresi yang berisi token dan modifier. Tokennya adalah \d yang artinya “sebarang angka”. g adalah modifier yang berarti “cari semuanya, jangan berenti di angka pertama”. Kalo ga pake g, 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 , /hijau/ig.
Modifier
JavaScript nyediain 3 modifier yang bisa kita pake yaitu :
g: global, cari semua yang cocok.i: ignore case, huruf besar & huruf kecil sama ajam: multiline, cari di semua baris teks, jangan berenti biarpun ketemu karakter line-break.
Kita coba apa gunanya g.
Kalo kita ingin cari teks dalam semua baris, kita gabungin g & m. Selain itu, kita perlu pake karakter yang disebut anchor penanda awal atau akhir baris, ^ atau $.
Ekspresi ^ba dalam kode di atas artinya “Cari ba mulai dari awal baris“. Tapi karena kita pake m, 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.
| Token | Artinya |
|---|---|
. |
Sebarang karakter |
\d |
Sebarang angka, 1 digit, 0 – 9 |
\D |
Sebarang karakter yang bukan angka |
\w |
Sebarang angka atau huruf kecil & besar termasuk underscore |
\W |
Sebarang karakter yang bukan huruf, angka, atau underscore |
\s |
Karakter whitespace, spasi, tab, line-break |
Token . artinya sebarang karakter kecuali line-break (\n , \r).
Gimana kalo kita ingin cari tanda titik? Kita perlu pake \ di depan titik, jadi tanda titiknya dianggap karakter bukan token regex. Contohnya begini,
Contoh untuk Character class lainnya:
Character Set
Token ini mendefinisikan sekelompok karakter yang ingin kita cari. Sintaksnya pake kurung siku [ ]. Set bisa berisi pilihan beberapa karakter atau range seperti huruf a-z , angka 1-100, dll.
Tanda karet ^ di baris terakhir adalah negasi, jadi regexnya berarti semua karakter yang bukan angka 0 – 9.
Alternation
Ini token sederhana, |. Fungsinya mirip dengan pencabangan if-else. Kalo satu pola ga ketemu, cari pola satunya.
Boundary / Anchor
Token boundary mendefinisikan batas awal/akhir teks yang diproses.
| Token | Artinya |
|---|---|
^ |
Awal baris |
$ |
Akhir baris |
\b |
Batas awal / akhir kata. Antara huruf/angka dan spasi |
Quantifier
Quantifier menentukan berapa banyak karakter yang dicari.
| Token | Artinya |
|---|---|
* |
0 atau lebih, sebanyak-banyaknya |
+ |
1 atau lebih, sebanyak-banyaknya |
{m,n} |
minimal m , maksimal n |
? |
0 atau 1 |
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.gif
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 exec(). Contohnya,
Kita lihat hasil exec() adalah sebuah array & 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.
Ya gitu deh tentang Regex, tutorialnya cukup sekian. Kalo mau lanjut silakan kerjain latihan soal di bawah š
Latihan Soal
Dari daftar nomor telepon di bawah ini:
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
a. Cari semua nomor yang kode areanya 021 atau 031
b. Cari semua nomor yang kode areanya bukan 021 & 031
c. Cari semua nomor yang dua angka terakhirnya 77 & kode areanya 031 atau 0341
Coba kerjain sendiri. Kalo mentok ga bisa jawab ya boleh lah liat jawabannya di sini.
Also in this category ...
- » End-to-end Testing dengan The Intern
- » Cara Mudah Pakai Environment Variable dengan Webpack
- » ReactJS : Higher Order Component
- » Manajemen State dengan Redux (tanpa React)
- » Bikin Project JavaScript (Webpack) dengan Poi