belajarwebdesign.com

Posted: 11 May 2012 07:44 PM PDT

Regular expresion atau biasa disingkat regex, hanyalah suatu “alat” untuk menemukan substing tertentu yang didasarkan pada suastu pola. Regex sering digunakan developer untuk validasi atau sanitasi, kalau desainer web saya kurang tau. validasi maksudnya adalah confirmasi apakah suatu string/teks sesuai dengan pola yang kita inginkan, sedangkan sanitasi, mmmm.. sebenarnya saya ambil dari kata sanitization yang ada dalam manual PHP, intinya menghilangkan karakter-karakter yang tidak diinginkan dalam suatu string. Tulisan ini adalah tutorial tentang regex, dimana saya akan membahas sedikit mengenai cara menggunakan regex.

Persyaratan

Dalam penulisan tutorial ini saya mengasumsikan anda telah mengetahui HTML, CSS dan Javascript. Tutorial ini menggunakan Javascript dan dijalankan pada browser. Regex juga telah didukung oleh banyak programming/scripting language seperti PHP dan Ruby, dan memiliki implementasi yang berbeda-beda tergantung masing-masing bahasa. Browser yang saya gunakan adalah Google Chrome 18.0.1025.162 m.

Saya mungkin menggunakan istilah-istilah saya sendiri yang mungkin tidak umum digunakan. Oleh karena itu saya menyarankan anda lebih baik mengerti maksud dari istilah yang saya gunakan dari pada mengingat nama-nama istilahnya. Tuturial ini bersifat amatiran dan bukan profesional, segala kekurangan dalam tulisan ini harap dimaklumi.

Bahasan Tutorial

Bahasan tutorial ini tentang dasar-dasar regex yang mencakup sintak, modifier, wildcard, grouping, group indexing, backrefrences index dan skip indexing. Untuk modifier, yang akan dibahas hanya Global (g) dan Case-insensitive (i). Modifier Multiline (m) saya pikir lebih cocok dibahas bersama anchor regex (^ dan $).

Persiapan

Persiapan yang diperlukan untuk mengikuti tutorial ini adalah teks editor, browser, dan dua file. File yang saya gunakan bernama index.html dan init.js. Isi file index.html adalah sebagai berikut

  <!DOCTYPE html>  <html>      <head>          <title>RegExp</title>          <style>              #regex {                  font-size: 16px;                  line-height: 1.5;              }              code mark:nth-child(odd) {                  background-color: #0ff;              }          </style>          <script type="text/javascript">              RegExp.prototype.match = function(str) {                  document.getElementById("regex").innerHTML += "<code>" + str.replace(this, function(v) {                      return "<mark>" + document.createTextNode(v).data + "</mark>";                  }) + "</code>\n";              };          </script>      </head>      <body>          <pre id="regex"></pre>          <script type="text/javascript" src="init.js"></script>      </body>  </html>

index.html ini hanya berfungsi sebagi “viewer”. Anda tidak perlu mengubah isi file tersebut selama mengikuti tutorial ini. Kita hanya akan mengubah isi file init.js dan melihat hasilnya di index.html. Jadi, broswer anda hanya akan membuka index.html sedangkan teks editor anda membuka init.js. Isi file init.js sebagai berikut

  (function() {    })();

kode2 yang dituliskan nanti sebaiknya berada diantara (function() { dan })();. untuk mengetahui apakah kode berjalan sesuai yang diinginkan, maka tuliskan kode dibawah ini dalam file init.js.

  /dunia/.match("Halo dunia desain web");    /dunia/g.match("Halo dunia desain web dari dunia lain");

sebelumnya perlu diingat bahwa kode diatas hanya parsial. Keseluruhan isi file init.js adalah seperti dibawah ini.

  (function() {  /dunia/.match("Halo dunia desain web");    /dunia/g.match("Halo dunia desain web dari dunia lain");  })();

Jika sudah, maka buka/refresh file index.html pada browser anda. Jika tampilan seperti pada gambar 1, maka persiapan telah selesai dan kita siap kelangkah selanjutnya.

gambar 1. Tampilan index.html jika persiapan berhasil

ah iya, dalam gambar diatas, saya mengakses index.html dari URL http://www.lab.local/regexp/. Kasus anda mungkin berbeda tergantung dimana anda menyimpan file index.html.

Sintak

Regex memiliki sintak yang terdiri dari delimiter, pattern dan modifier. Pada contoh /dunia/g, / (garis miring) adalah delimiter, string dunia adalah pattern dan g adalah modifier. Delimiter digunakan untuk menentukan dimana pattern berawal dan berakhir. Pada javascript, anda hanya bisa menggunakan garing sebagai delimiter. Pattern adalah pola string yang ingin ditemukan atau dicocokan. Modifier adalah mode regex meng-handle hasil pencarian string atau teks.

Regex yang anda bangun akan mencari substring yang sesuai dengan pola (pattern). Pada gambar 1, substring “dunia” yang ter-highlight adalah substing yang “ditemukan” regex, tidak perduli dimanapun substring “dunia” tersebut berada. Perhatikan hasil regex berikut untuk lebih jelasnya.

  /dunia/.match("dunia diawal string");  /dunia/.match("string diakhiri dunia");  /dunia/.match("mencariduniadimanapunkeberadaannya");

Modifier

Seperti yang telah dijelaskan sebelumnya, modifier berfungsi untuk mengatur hasil pencarian regex. Terdapat 3 modifier umum yang di-support berbagai bahasa pemograman, yaitu Global, Case-insensitive dan Multiline. Berikut ini yang akan saya coba jelaskan adalan modifier Global dan Case-insensitive. Multiline akan dibahas berikutnya bersama dengan anchor.

g : Global

Contoh dari gambar 1 hanya terdapat 2 regex yang mencari substring “dunia” dalam teks “Halo dunia desain web” dan “Halo dunia desain web dari dunia lain”. Regex pertama /dunia/ tidak mengunakan modifier apapun. Keadaan ini biasanya disebut mode standart. Dalam mode standart, regex hanya mencari satu substring saja yang cocok dengan pattern. Coba anda masukkan kode dibawah ini dan lihat hasilnya.

  /dunia/.match("Halo dunia desain web dari dunia lain");

hasilnya sebagai berikut

gambar 2. standart mode

Anda bisa lihat, walaupun terdapat 2 substring “dunia” dalam input string “Halo dunia desain web dari dunia lain”, hasil pencarian regex hanya menghasilkan satu kata “dunia” yang sesuai dengan pattern (dunia). Jika anda ingin mencari semua substing pada input string yang sesuai dengan pattern, maka anda bisa menggunakan modifier g seperti pada gambar 1.

i : Case-insensitive

Mode standart bersifat case-sensitive, artinya huruf besar dan kecil diperhitungkan dalam mencari substring yang sesuai dengan pattern. Anda dapat membuat pencarian regex bersifat incase-sensitive dangan menambahkan modifier i. untuk lebih jelasnya, perhatikan kode berikut dan hasilnya.

  var regexpEl = document.getElementById("regex");    regexpEl.innerHTML += "<b>standar mode</b>\n";  /dunia/.match("dunia DUNIA duNiA lain");  /DUNIA/.match("dunia DUNIA duNiA lain");  /Dunia/.match("dunia DUNIA duNiA lain");    regexpEl.innerHTML += "--------------------------\n";  regexpEl.innerHTML += "<b>case-insensitive mode</b>\n";  /dunia/i.match("dunia DUNIA duNiA lain");  /DUNIA/i.match("dunia DUNIA duNiA lain");  /Dunia/i.match("dunia DUNIA duNiA lain");    regexpEl.innerHTML += "--------------------------\n";  regexpEl.innerHTML += "<b>case-insensitive dan global mode</b>\n";  /dunia/ig.match("dunia DUNIA duNiA lain");  /DUNIA/ig.match("dunia DUNIA duNiA lain");  /Dunia/ig.match("dunia DUNIA duNiA lain");

hasil kode diatas adalah sebagai berikut

gambar 3. incase-sensitive modifier

Matacharaters

Dalam contoh-contoh sebelumnya, pattern regex yang digunakan hanyalah string biasa, seperti “dunia”. String-string seperti itu biasanya disebut literal string, yang tiap karakternya benar-benar dicocokan persis antara pattern dan string inputnya. Terdapat karakter-karakter yang tidak bersifat literal yang disabut metacharacter. Metacharacter adalah karakter-karakter yang memiliki arti spesial dalam pattern regex tergantung dimana karakter tersebut digunakan. Metacharacter dalam regex adalah . \ + * ? [ ^ ] $ ( ) { } = ! < > | : -.

Escaping

Escaping metacharacter adalah blackslash (\). Escaping maksudnya mengabaikan arti spesial dari karakter sehingga bersifat literal. Escaping hanya berlaku pada metacharacter dan delimiter, sedangkan penggunaan backslash pada karakter lain dapat memiliki arti berbeda. Backslash digunakan tepat sebelum karakter yang akan diescape.

Kasus escaping misalnya pada pattern yang memiliki karakter garing yang merupakan delimiter. Anda tidak bisa menuliskan pattern “http://” dalam regex anda seperti /http:///i, kode tersebut akan menganggap pattern anda adalah “http:” karena string tersebut berada diantara delimiter (/http:///i) dan garing setelahnya (/http:///i) akan dianggap sebagai modifier yang tidak diketahui sehingga bersifat error.
Jadi, untuk mengabaikan arti karekater garing sebagai delimiter, anda perlu meng-escape-nya. perhatikan contoh berikut dan hasilnya pada gambar 4.

  /http:\/\//.match("http://www.belajarwebdesign.com");  /http:\/\//.match("ftp://www.belajarwebdesign.com");

gambar 4. escape backslash pada karakter slash (garis miring)

hmmm… tapi tunggu dulu! bukankah dalam pattern /http:\/\//i diatas ada karekter titik dua (:) yang juga merupakan metacharacter, kenapa tidak diescape? inilah maksud saya sebelumnya bahwa “arti spesial dalam pattern regex tergantung dimana karakter tersebut digunakan“. Dalam contoh ini karakter titik dua tidak bersifat metacharacter, kita akan membicarakan kapan titik dua bersifat metacharakter nantinya.

Backslash dan Special Character

Bakckslah juga dipakai sebagai pembentuk special character, contohnya control character dan ASCII karakter yang tidak ada pada keyboard standart. Penggunaan karakter backslash (“\”) sebelum katarter “t” akan memiliki arti bahwa kedua karater tersebut adalah satu karakter, yaitu horizontal tab (tab). Jadi regex /\t\t/ akan mencocokan dua karater tab, bukan string dengan karakter berurutan “backslash, t, backslash, t”. Control characters yang dapat anda gunakan pada regex adalah sebagai berikut.

\a alert (bell).
\b backspace
\e ASCII escape character
\f form feed
\n newline
\r carriage return
\t horizontal tab
\v vertical tab

Selain itu, anda juga dapat mengases karakter dari code hexadecimal Unicode dengan format \x<code><code> atau \u<code><code><code><code>. Misalnya katakter copyright (©) dapat ditulis dengan \xA9 atau \u00A9. Perlu diketehui bahwa format tersebut berlaku dalam javascript, beberapa bahasa pemograman memiliki formatnya sendiri, seperti PHP mengguanakan \x dibandingkan \u.

Wildcard

Karakter wildcard dalam regex adalah titik (.). Wildcard dapat dicocokan dengan “hampir apa saja”, bisa huruf, angka atau tanda baca termasuk titik. Karakter yang tidak bisa dicocokan dengan wildcard adalah baris baru (“\n“). Satu wildcard hanya cocok dengan satu karakter. Contoh kode regex wildcard seperti dibawah ini, dan hasilnya pada gambar 5.

  /w.b/g.match("web wwb w3b w@b w.b w?b w b w\nb w\tb w\xA5b woob");

gambar 5. wildcard cocok dengan semua karakter kecuali baris baru ("\n")

Anda perlu teliti ketika menggunakan wildcard, karena pemula regex biasanya tertipu saat menggunakan wildcard. Contohnya anda ingin mencari apakah kata “file.js” ada dalam suatu path file. Regex /file.js/ memang cocok dengan string yang memiliki substring “file.js” seperti yang diinginkan. Akan tetapi, regex tersebut juga akan cocok dengan substring “file-js”, “fileOjs”, “file5js” dll. Jadi, regex untuk mencari hanya substring “file.js” adalah /file\.js/.

Alternation

Alternation digunakan untuk membuat subpattern. hmmmm… subpattern? ini sebenarnya istilah saya sendiri hehehehe, saya akan mencontohkan agar anda mengerti subpattern yang saya maksudkan. Misalnya anda ingin mancari substring “jpg”, “gif” dan “png” dalam suatu string, maka pattern masing-masing substring tersebut adalah /jpg/, /gif/ dan /png/. Hal tersebut tidak efisien jika anda menggunakan 3 pattern untuk satu input string. Tiga pattern tersebut dapat digabung dan memiliki makna “alternatif”. Patternnya adalah jpg|gif|png. Anda bisa lihat bahwa karakter pipe (|) adalah metacharacter untuk alternation. Regex /jpg|gif|png/ memiliki arti cari substring “jpg” atau “gif” atau “png”. Perhatikan hasil kode regex berikut pada browser (index.html) anda.

  /jpg|gif|png/g.match("avatar.gif");  /jpg|gif|png/g.match("avatar.png");  /jpg|gif|png/g.match("banner.png");  /jpg|gif|png/g.match("banner.jpg");  /jpg|gif|png/g.match("pngjpggif");

Grouping

Grouping adalah pengelompokan subpattern (ekpresi) tertentu sehingga dapat dibedakan dengan ekspresi lainnya. Groping menggunakan buka kurung (“(“) dan tutup kurung (“)”) dan ekspresi diletakan diantara buka kurung dan tutup kurung. Kasus penggunaan grouping misalnya mencocokan file dengan nama “banner” yang memiliki ektensi “jpg”, “gif” atau “png”. Pattern yang dapat digunakan adalah /banner\.jpg|banner\.gif|banner\.png/. Dari pattern tersebut anda bisa melihat bahwa hanya terdapat perbedaan pada ektensi jpg, gif dan png. Ekstensi tersebut dapat digabung dalam satu alternation menjadi jpg|gif|png, dan untuk membedakan bahwa jpg|gif|png adalah kelompok tersendiri, maka dilakukan grouping, sehingga regex akhirnya adalah /banner\.(jpg|gif|png)/. Regex /banner\.jpg|banner\.gif|banner\.png/ memiliki arti cari substring “banner.jpg” atau “banner.gif” atau “banner.png”, sedangkan regex /gambar\.(jpg|gif|png)/ memiliki arti cari substring “banner.” diikuti dengan substring “jpg” atau “gif” atau “png”. perhatikan contoh kode dibawah ini dan hasilnya pada gambar 6.

  /banner\.jpg|banner\.gif|banner\.png/.match("path/avatar.gif");  /banner\.jpg|banner\.gif|banner\.png/.match("path/banner.gif\n");    /banner\.(jpg|gif|png)/.match("path/avatar.gif");  /banner\.(jpg|gif|png)/.match("path/banner.gif\n");    /banner\.(jpg|gif|png)/.match("path/banner.png");  /banner\.(jpg|gif|png)/.match("path/banner.jpg");

gambar 6. grouping regex

Nesting Grouping

Groping juga dapat dilakukan dalam grouping lain, yang disebut nesting grouping atau pengelompokan bersarang. Misalnya anda ingin mencocokan suatu pola filepath seperti “gambar/banner.png”. Sebut saja “gambar” adalah dirname dan “banner.png” adalah filename, dimana filename terdiri dari basename yaitu “banner” dan extension yaitu “png”. Kasusnya adalah nama extension bisa “jpg”, “gif” atau “png”, nama basename bisa “banner” atau “top”, format filename adalah basename
diikuti titik (.) lalu extension, nama dirname bisa “gambar” atau “image” dan format filepath adalah dirname diikuti garing (/) lalu filename. Regex untuk kasus tersebut dapat ditulis /((gambar|image)\/((banner|top)\.(jpg|gif|png)))/. Regex tersebut memiliki 5 kelopok (groups). Pengelompokan dibaca dari kiri ke kanan, sehingga urutan kelompok dari pattern tersebut adalah:

filepath (/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/)
dirname (/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/)
filename (/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/)
basename (/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/)
extension (/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/)

Jadi, jika regex /((gambar|image)\/((banner|top)\.(jpg|gif|png)))/ digunakan untuk mencocokan string “asset/gambar/top.jpg”, maka nilai dari pengelompokannya adalah:

filepath (gambar/top.jpg)
dirname (gambar)
filename (top.jpg)
basename (top)
extension (jpg)

Contoh nesting kode nesting group dan hasilnya dapat dilihat pada kode dibawai ini dan gambar 7.

    /((gambar|image)\/((banner|top)\.(jpg|gif|png)))/      .match("gambar/top.gif");    /((gambar|image)\/((banner|top)\.(jpg|gif|png)))/      .match("asset/gambar/top.jpg");    /((gambar|image)\/((banner|top)\.(jpg|gif|png)))/      .match("image/banner.png");    /((gambar|image)\/((banner|top)\.(jpg|gif|png)))/      .match("image/banner.jpeg");

gambar 7. nesting grouping

Backrefrences Index Group

Urutan pengelompokan pada penjelasan diatas disebut index group. Index group ini dapat anda pakai lagi dalam pattern regex dengan menggunakan backrefrences index atau indexing. Indexing dilakukan dengan menggunakan backslash (\) diikuti nomor index, contohnya \1, \2, \3 dst. Untuk mempermudah penjelasan saya akan menggunakan contoh kasus.

Misalnya anda ingin membuat pola attribute HTML yang memiliki tanda petik (quote) yang harus sama antara open dan close-nya, contohnya adalah src=”banner.png” atau src=’banner.png’. Anda tidak bisa membuat regex seperti /src=("|')banner\.png("|')/ untuk kasus ini. regex tersebut memang akan cocok dengan src=”banner.png” dan src=’banner.png’, tetapi cocok juga dengan src=“banner.png‘ atau src=‘banner.png“ (perhatikan kedua quotenya) dimana string tersebut seharusnya tidak valid. Disinilah indexing berfungsi, anda hanya perlu meng-group open quote, dan close quote akan menyesuaikan open quote, jadi jika open quote adalah tanda petik, maka close quote juga tanda petik, demikian halnya dengan petik tunggal. Regexnya adalah /src=("|')banner.png\1/. Backrefence \1 digunakan karena group ("|') berada pada index 1, jika misalnya anda melakukan gruoping lebih dari satu, maka anda perlu teliti terhadap urutan index yang anda inginkan. Contoh kode dan hasilnya dapat anda lihat dibawah ini.

  /src=("|')banner.png\1/.match("src=\"banner.png\"");  /src=("|')banner.png\1/.match("src=\'banner.png'");  /src=("|')banner.png\1/.match("src=\"banner.png'");  /src=("|')banner.png\1/.match("src='banner.png\"");

gambar 8. backrefrences index

Skip Indexing

Grouping regex secara otomatis akan mengindex hasil grouping sehingga dapat digunakan untuk backrefrences. Indexing dapat di-skip dalam gruoping dengan menggunakan 2 metacharater yaitu tanda tanya dan titik dua (?:), yang diletakkan setelah kurung buka (“(“). Mari gunakan kembali contoh grouping pattern /((gambar|image)\/((banner|top)\.(jpg|gif|png)))/ sebelumnya. Jika anda ingin men-skip filename, maka anda dapat mengubah gruoping terhadap filename dari ((banner|top)\.(jpg|gif|png)) menjadi (?:(banner|top)\.(jpg|gif|png)) sehingga pattern lengkapnya adalah /((gambar|image)\/(?:(banner|top)\.(jpg|gif|png)))/. Hasil indexing akan mengabaikan group filename, dan melihat grouping berikutnya yaitu basename. Jika group basename juga di-skip, maka indexing akan dilakukan pada group berikutnya, dalam kasus ini adalah extension, demikian seterusnya. Regex /((gambar|image)\/((banner|top)\.(jpg|gif|png)))/ dan /(?:(?:gambar|image)\/(?:(?:banner|top)\.(jpg|gif|png)))/ memiliki hasil kecocokan yang sama terhadap suatu string, yang berbeda hanyalah urutan indexnya, dimana regex kedua hanya mengindex extension sehingga extension berada pada index pertama.

Penutup

Regex memiliki topik yang cukup luas, akan terlalu banyak jika dibahas dalam satu postingan. Jika ada kesempatan, saya akan melanjutkan tulisan ini dalam postingan lainnya. Jika anda ingin melanjutkan memahami regex setelah membaca tutorial ini, maka saya sarankan anda lanjutkan dengan memahami character class, character type, anchor dan repetation. Silahkan googling topik-topik regex tersebut.