Tutorial Javascript 12 - Regular Expression Object

Regular Expression atau sering disingkat RegExp atau RE adalah suatu mekanisme pencocokan pola (pattern matching) yang dibuat dengan menggunakan karakter-karakter khusus. Fungsinya sangat beragam, mulai dari memeriksa apakah sebuah inputan sudah sesuai atau belum (test), untuk membuat fitur pencarian (search) atau penggantian string (replace).

Contoh method yang menggunakan RegExp sudah kita lihat pada pembahasan tentang string object. Diantaranya method search(), match() dan replace(). Selain itu juga terdapat beberapa method yang khusus "melekat" ke RegExp Object javascript.

Penggunaan paling banyak dari RegExp adalah untuk proses validasi form. Sebagai contoh, bagaimana caranya kita memastikan seseorang sudah menginput alamat email dengan benar? Apakah yang diinput di kolom total pemesanan sudah berupa angka? atau malah huruf? Bagaimana cara memastikan inputan password yang syaratnya harus dibuat dari 6 karakter dan mengandung minimal 1 angka dan 1 huruf besar? Ini semua ditangani oleh RegExp.

Cara Membuat RegExp Object

Di dalam javscript, regular expression ditempatkan ke dalam object sendiri, yakni RegExp object. Sama seperti mayoritas object bawaan javascript lain, kita memiliki 2 cara penulisan menggunakan object constructor atau cara langsung (literal).

Berikut contoh pembuatan RegExp di dalam javascript:

var foo = /ab+c/;

console.log(foo);  // /ab+c/
console.log(typeof foo);  // object

var bar = new RegExp("ab+c");

console.log(bar);  ///ab+c/
console.log(typeof bar);  // object

Menggunakan penulisan literal, kita tinggal membuat pola karakter diantara tanda forward slash: / dan /. Ini merupakan cara membuat regexp yang paling disarankan.

Menggunakan object constructor, perintahnya adalah new RegExp(). Dimana pola regular expression diinput sebagai argumen dari RegExp(). Cara ini tidak sering dipakai karena kurang efisien jika dibandingkan penulisan literal. Namun apabila pola regular expression diinput secara realtime (misalnya kode regexp diinput langsung dari form). Penulisan object contructor bisa dipakai.

RegExp Object Method

RegExp object memiliki beberapa method dan property. Sebagian besar dari method ini merupakan fitur lanjutan yang jarang dipakai. Kita hanya akan membahas 2 diantaranya: method test() dan exec().

Method RegExp.prototype.test()

Method test()  digunakan untuk memeriksa apakah sebuah string lolos dari pola regular expression yang diinput. Jika lolos, hasilnya true. Jika tidak, hasilnya false.

Method ini mirip seperti include() dari String Object. Bedanya pada method test() pengecekan string menggunakan pola regular expression. Berikut contoh penggunaannya:

var foo = "Belajar JavaScript";
var pola = /JavaScript/;

console.log(pola.test(foo));  // true
console.log(/Belajar/.test(foo));  // true
console.log(/belajar/.test(foo));  // false

Disini saya membuat 2 buah variabel: foo dan pola. Variabel foo berisi string sedankan pola berisi pola regular expression /JavaScript/.

Perintah pola.test(foo) artinya saya ingin memeriksa apakan pola /JavaScript/ terdapat di dalam string foo atau tidak. Pola `/JavaScript/ `maksudanya sama dengan sebuah kata "JavaScript". Kata ini tentunya ada di dalam variabel foo dan hasil method test() adalah true.

Begitu juga dengan perintah /Belajar/.test(foo) yang artinya saya ingin memeriksa apakah kata "Belajar" ada di dalam string foo. Terlihat kita dapat langsung memanggil method RegExp dari penulisan literal, tanpa harus menyimpanya kedalam variabel terlebih dahulu.

Perintah terakhir /belajar/.test(foo) hasilnya false karena perbedaan huruf kecil di karakter "b". Artinya kata "belajar" tidak ditemukan (bersifat case sensitif). Lebih jauh tentang cara membuat pola RegExp akan kita bahas sesaat lagi.

Method RegExp.prototype.exec()

Method exec() berfungsi untuk mencari karakter atau kata yang cocok dengan pola regular expression, kemudian menyimpan hasilnya ke dalam array.

Berikut contoh penggunaannya:

var foo = "1 jam sama dengan 60 menit, juga sama dengan 3600 detik";
var pola = /\d+/;

console.log(pola.exec(foo));  // Array ["1"]

Pola \d+ artinya cari karakter angka dengan jumlah digit 1 atau lebih. Sehingga perintah pola.exec(foo) digunakan mencari karakter angka dari string foo. Hasilnya adalah angka 1 yang menjadi element array. Ini merupakan fitur default dari method exec(), yakni ketika sebuah pola yang cocok sudah ketemu, method akan langsung berhenti.

Bagaimana cara mencari "semua" digit? Kita bisa menambahkan sebuah flag g atau penanda di dalam pola regular expression. Pola tersebut menjadi seperti ini:

var foo = "1 jam sama dengan 60 menit, juga sama dengan 3600 detik";
var pola = /\d+/g;

console.log(pola.exec(foo));  // Array ["1"]
console.log(pola.exec(foo));  // Array ["60"]
console.log(pola.exec(foo));  // Array ["3600"]
console.log(pola.exec(foo));  // null

Setiap kali method exec() dipanggil, pencarian pola akan lanjut ke posisi berikutnya. Jika tidak adalagi pola yang cocok, method ini akan mengembalikan nilai null.

Oleh karena itu fitur method exec() yang seperti ini untuk mencari seluruh pola, kita harus menggunakan perulangan. Konsepnya, selama method pola.exec(foo) belum mengembalikan nilai null, lakukan terus pencarian pola.

Pola Reguler Expression

Mempelajari pola reguler expression bisa dibilang "gampang-gampang susah". Karakter penyusun pola regexp tidak begitu banyak, tapi hasil dari pola yang ditulis cukup susah untuk dibaca. Agar mudah dipahami, kita akan banyak menggunakan contoh kode program.

Pola RegExp Sebagai String

Mari kita mulai dari pola yang paling sederhana yakni jika isi regular expression berbentuk string biasa yang terdiri dari sebuah kata atau berberapa karakter. Jika ditulis seperti ini, pola tersebut akan cocok selama di dalam string terdapat kata tersebut (di posisi mana saja). Berikut contohnya:

var foo = "Belajar JavaScript";

console.log(/JavaScript/.test(foo));  //true
console.log(/JavaScript/.test(foo));  //false
console.log(/Belajar/.test(foo));  // true
console.log(/belajar/.test(foo));  // false
console.log(/Java/.test(foo));  // true
console.log(/ajar/.test(foo));  // true

Disinilah saya memiliki sebuah string "Belajar JavaScript" yang disimpan ke dalam variabel foo. Perhatikan penulisan pola regular expression, semuanya berisi kata-kata biasa. Method test() akan menghasilkan nilai true jika kata tersebut ada di dalam string foo.

Pola Character Set

Pola selanjutnya adalah character set, dimana kitaa bisa membuat syarat bahwa hanya karakter tertentu saja yang boleh ditulis. Ini dibuat menggunakan tanda kurung siku: [ dan ]. Hanya karakter yang ada di dalam tanda kurung ini saja yang akan memenuhi syarat.

Berikut contoh penggunaannya:

var pola = /[abcde]../;

console.log(pola.test("abaa"));  // true
console.log(pola.test("fba"));  // false
console.log(pola.test("1dd"));  // false
console.log(pola.test("add"));  // true
console.log(pola.test(" dd"));  // false
console.log(pola.test("belajar"));  // true

Pola /[abcde]../ artinya, digit pertama hanya bisa diisi oleh salah satu dari huruf a, b, c, d atau e. Kemudian salah satu huruf tersebut diikuti setidaknya oleh 2 karakter lain (bebas mau karakter apa saja).

Dengan demikian, string yang memenuhi syarat ini adalah: "abaa", "add" dan "belajar". String "fba" menjadi false karena digit pertama diawali huruf f. String "1dd" juga false karena karakter pertama berupa angka, sedangkan string " dd" hasilnya false karena karakter pertama berisi spasi. Pola /[abcde]../ bisa juga ditulis menjadi: /[a-e]../.