Belajar Regular Expression

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.

JS Bin on jsbin.com

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 aja
  • m : multiline, cari di semua baris teks, jangan berenti biarpun ketemu karakter line-break.

Kita coba apa gunanya g.

JS Bin on jsbin.com

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 $.

JS Bin on jsbin.com

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).

JS Bin on jsbin.com

Gimana kalo kita ingin cari tanda titik? Kita perlu pake \ 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 [ ]. Set bisa berisi pilihan beberapa karakter atau range seperti huruf a-z , angka 1-100, dll.

JS Bin on jsbin.com

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.

JS Bin on jsbin.com

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

JS Bin on jsbin.com

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

JS 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.gif

JS 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 exec(). Contohnya,

JS Bin on jsbin.com

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.

JS Bin on jsbin.com

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 ...