Dasar Regular Expression Di Javascript

Manipulasi String di Javascript bisa menggunakan split(), match(), search(), dan lainnya. Salah satu lagi untuk memanipulasi String adalah dengan regular expression atau object RegExp. Regular Expression diartikan sebagai pola dari string untuk memanipulasi string yang ada dari pola tersebut.

Dalam Javascript, untuk menggunakan Regular Expression, kita menggunakan object RegExp yang merupakan salah satu native object dari Javascript seperti Array. Untuk membuat suatu RegExp ada 2 cara.


Var RegExpKu = / [pola yang digunakan] /;

Slash awal dan akhir menunjukan kepada javascript bahwa isi dari variable RegExpKu adalah tipe regular expression.

Lalu dengan memanggil konstruktor dari fungsi RegExp().

Var RegExpKu = new RegExp(“ [pola yang digunakan] ”);

Sekarang mari kita coba menggunakan RegExp kasus sederhana yaitu mengganti nama adiputra menjadi ad1putr4 dari sekumpulan nama yang ada.

<html>
<body>
  <script laguage='javascript'>
    var nama = "adiputra,Adiputra,Sutrisno,Wahyu,Bimo,adiputra,Castiq";
	var polaExp = /adiputra/;
	nama = nama.replace(polaExp,"ad1putr4");
	alert(nama);
  </script>
</body>
</html>

Hasilnya seperti gambar dibawah.

Tapi kenapa adiputra yang dibelakang tidak diganti yah?

Secara default, bila dalam prosesnya, RegExp akan mencari dan berhenti bila pola yang dicari berhasil ditemukan. Jadi saat mencari adiputra, maka proses terhenti dan adiputra yang dibelakang tidak dicek. Lalu bagaimana agar adiputra yang dibelakang dicek?

Coba ubah dengan variable polaku menjadi

var polaExp = /adiputra/g;

Silakan ditesting sendiri..berhasil tidak ?

Maksudnya apa itu ? maksudnya adalah kita suruh RegExp untuk mencari semua kata ‘adiputra’ dari variable nama secara global. g tersebut adalah atribut dari RegExp. Ada 3 atribut dari RegExp.

Kalau “i” itu digunakan bila pola yang kita case-insensitive, artinya adiputra dengan Adiputra dianggap sama.
Sampai sini jelas semoga jelas yah… ? Lanjut…

SPESIAL KARAKTER DI REGULAR EXPRESSION

Di Regular Expression mengenal karakter special yang biasanya terdiri dari angka, huruf dan spasi. Karakter-karakter tersebut bisa dilihat di table dibawah ini.

  • \d : Hanya berisi digit angka dari 0 – 9
  • \D : hanya berisi huruf bukan angka
  • \w : berisi digit dari 0-9 dan huruf dari A-Z dan a-z
  • \W : sebuah huruf khusus seperti @, # dan yang lainnya
  • \s : berisi spasi, tab, dan enter

Lainnya liat di table yah. Sekarang kita coba cara pemakaiannya.

Berikut ini adalah simple code untuk mengetes apakah password yang dimasukan valid atau tidak. Password yang valid adalah password yang berisi huruf a-z atau A-Z dan angka 0-9 bertipe case-insensitive. Berikut codenya :


<html>
<head>
<script language='Javascript'>
    function cek_valid(text){
	 var pola = /[^a-z\d ]/i;
	 return !(pola.test(text));
    }
	
    function TombolCek(){
	if ( cek_valid(document.form1.txtHuruf.value) == true ) {
	    alert("Password sesuai dengan pola!");
	}else {
	    alert("Password gak sesuai dengan pola!");
	}
    }
	
</script>
</head>
<body>
  <form name='form1'>
    Masukan passwordnya : <br>
	<input type="text" name=txtHuruf> <br>
	<input type="button" value="Cek Password" name="TombolCek1" onclick="TombolCek()">
  </form>
</body>
</html>

Penjelasan singkatnya begini. Focus ke pola yang kita buat yaitu :

var pola = /[^a-z\d ]/i;

[^ ] artinya adalah pola yang selain / negasi pola yang dikurungkan. Misalnya :

var pola1 = /[^a-z];

itu berarti pola1 hanya menerima karakter selain huruf a-z.

Lalu pada pola kita menambahkan :

var pola = /[^a-z\d ]/;

yang berarti bahwa pola menerima karakter selain huruf a-z dan angka 0-9.

Dan terakhir kita tambahkan case-insensitive karakter, artinya huruf besar kecil gak ngaruh.

var pola = /[^a-z\d ]/i;

Terakhir adalah mengembalikan / nge-return nilai keluaran fungsi yang isinya adalah negasi dari fungsi test() yang artinya pengecekan pola dari masukan user.

return !(pola.test(text));

Begitulah singkatnya proses pengecekannya. Saat user mengetikan password di element input tipe text dengan nama txtHuruf. Ada event onclick yang menangkap inputan user dengan fungsi TombolCek() dan di badan TombolCek ada pemanggilan fungsi cek_valid() yang bertugas mengecek apakah inputan user sesuai dengan pola yang telah kita buat atau tidak. Kalau tidak keluarkan dengan nilai !tidak = benar dan !benar = salah.

Sampai sini lanjut lagi yah.

PENGULANGAN KARAKTER
Pengulangan karakter maksudnya adalah pola regular expression dimana kita dapat menyeting pola tersebut dengan batas-batas pengulangan pola. Misalnya kita buat pola untuk mengecek apakah nomor telepon yang dimasukan user benar atau asal dan kasus-kasus lainnya. Berikut ini kita lihat terlebih dahulu table pengulangan karakter.

Sekarang kita coba terapkan kasus nomor telepon. Misalnya pola nomor telepon yang diterima adalah 0857-1058-85-22. Kalau kita bentuk di regexnya seperti ini :

Var pola = /\d\ d\d\d – \d\d\d\d – \d\d -\d\d /;

4 huruf bagian pertama, 4 huruf bagian kedua, 2 huruf bagian ketiga, dan 2 huruf bagian keempat.
Lebih sederhananya kita gunakan pengulangan di regex, jadi seperti ini :

Var pola = /\d{4} – \d{4} – \d{2} – \d{2}/;

Nah seperti itulah pengulangan karakter di regexp. Sekarang kita masuk ke Posisi Karakter di Regexp.

POSISI KARAKTER
“Posisi tempat duduk sangat menentukan masa depan klu pas ujian”
Haha,,sebagian teman ada yg bilang seperti itu waktu ujian. Trus maksud dari posisi karakter pada regexp itu apa ?

Pola yang mau kita terapkan ditempatkan dimana ?
itu kuncinya.
Misalnya pada contoh diatas kita ingin menambahkan kata “adiputra” menjadi “nyomandiputra”. Jadi simple codenya diatas tinggal diganti :

<html>
<body>
  <script laguage='javascript'>
    var nama = "adiputra";
	var polaExp = /^a/;
	nama = nama.replace(polaExp,"nyoman");
	alert(nama);
  </script>
</body>
</html>

Informasi tabel mengenai posisi karakter dari regexp bisa dilihat dibawah ini :

lalu kalau mau menaruh dibelakang ya tinggal liat huruf yang dibelakang apa. Misalnya Wahyu berarti huruf yang paling belakang adalah “u” jadi kalu mau menambahkan tingggal

var pola = /u$/;

ada tambahan penting, klu misalnya

var nama = “adiputra,Adiputra,Sutrisno,Wahyu,Bimo,adiputra,Castiq”;

dan kita ingin menambahkan dibelakang adiputra atau Wahyu ?
jawabnya tidak bisa karena var nama adalah multiple kata, yang dikenal dibelakang adalah “q” dari kata Castiq.

Lalu fungsi “\b” itu apa ?
Lihat langsung contoh code ini yah :

<html>
<body>
  <script laguage='javascript'>
    var nama = "adiputra,Adiputra,Sutrisno,Wahyu,Bimo,adiputra,Castiq";
	var polaExp = /\b/g;
	nama = nama.replace(polaExp,"#");
	alert(nama);
  </script>
</body>
</html>

Jelas tidak ? pembatasnya adalah selain dari kata. Bisa koma “,” atau apapun selain sebuah kata.
Kalau /B ? Silakan dicoba sendiri.

sampai situ dulu ya…
oiya,,saya iseng upload juga artikel ini di SINI
mohon koreksinya klu ada yang kurang..
“diatas langit masih ada langit” hanya sekedar sharing…

7 thoughts on “Dasar Regular Expression Di Javascript

Silahkan Komentar...

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s