Panduan Untuk Pemula Mengenai Reguler Expressions (Regex) dalam JavaScript

 

Setiap orang yang bekerja dengan JavaScript harus berurusan dengan string pada satu titik atau lainnya. Terkadang, kalian hanya perlu menyimpan string di dalam variabel lain dan kemudian meneruskannya. Di beberapa kesempatan kalian harus memeriksanya dan melihat apakah itu berisi substring tertentu.

Namun, beberapa hal tidak selalu semudah ini. Akan ada saat-saat ketika kalian tidak akan mencari substring tertentu tetapi satu set substring yang mengikuti pola tertentu.

Katakanlah kalian harus mengganti semua kemunculan "Apel" dalam sebuah string dengan "apel". Kalian cukup menggunakan MainString.replace("Apples", "apples"). Baik dan mudah.

Baca juga : Cara Memeriksa Apakah Suatu Objek Kosong Atau Tidak Dalam JavaScript

Sekarang katakanlah kalian harus mengganti "appLes" dengan "apel" juga. Demikian pula, "apel" harus menjadi "apel" juga. Pada dasarnya, semua variasi huruf "Apple" perlu diubah menjadi "apple". Melewati string sederhana sebagai argumen tidak lagi praktis atau efisien dalam kasus seperti itu.

Di sinilah reguler expressions masuk, kalian cukup menggunakan flag case-insensitive i dan menyelesaikannya. Dengan flag di tempat, tidak masalah jika string asli berisi "Apple", "APPles", "ApPlEs", atau "Apple". Setiap contoh kata akan diganti dengan "apel".

Sama seperti flag case-insensitive, reguler expressions menawarkan banyak fitur lain yang akan dibahas dalam tutorial ini.

Menggunakan Reguler Expressions dalam JavaScript

Kalian harus menggunakan sintaks yang sedikit berbeda untuk menunjukkan reguler expressions di dalam metode String yang berbeda. Tidak seperti string sederhana, yang diapit tanda kutip (quotes), reguler expressions terdiri dari pola yang diapit di antara garis miring (slashes). Flag apa pun yang kalian gunakan dalam reguler expressions akan ditambahkan setelah garis miring kedua (second slash).

Kembali ke contoh sebelumnya, inilah metode replace() yang akan terlihat dengan reguler expressions dan string sederhana.

 

1:  "I eat Apples".replace("Apples", "apples");  
2:  // I eat apples  
3:  "I eat Apples".replace(/Apples/i, "apples");  
4:  // I eat apples  
5:  "I eat aPPles".replace("Apples", "apples");  
6:  // I eat aPPles  
7:  "I eat aPPles".replace(/Apples/i, "apples");  
8:  // I eat apples  

 

Seperti yang kalian lihat, reguler expressions berfungsi di kedua kasus. Sekarang kita akan belajar lebih banyak tentang flag dan karakter khusus yang membentuk pola di dalam reguler expressions.

Backslash dalam Reguler Expressions

Kalian bisa mengubah karakter normal menjadi karakter khusus dengan menambahkan backslash di depannya. Demikian pula, kalian bisa mengubah karakter khusus menjadi karakter normal dengan menambahkan backslash di depannya.

Misalnya, d bukan karakter khusus (special character). Namun, \d digunakan untuk mencocokkan karakter digit dalam string. Demikian pula, D juga bukan karakter khusus, tetapi \D digunakan untuk mencocokkan karakter non-digit dalam sebuah string.

Karakter digit termasuk 0, 1, 2, 3, 4, 5, 6, 7, 8, dan 9. Saat kalian menggunakan \d di dalam reguler expressions, itu akan cocok dengan salah satu dari sembilan karakter ini. Saat kalian menggunakan \D di dalam reguler expressions, itu akan cocok dengan semua karakter non-digit.

Contoh berikut harusnya bisa memperjelas semuanya. 

1:  "L8".replace(/\d/i, "E");  
2:  // LE  
3:  "L8".replace(/\D/i, "E");  
4:  // E8  
5:  "LLLLL8".replace(/\D/i, "E");  
6:  // ELLLL8  

 

Kalian harus mencatat bahwa hanya karakter pertama yang cocok yang diganti dalam kasus ketiga. Kalian juga dapat menggunakan flag untuk mengganti semua kecocokan. Kita akan belajar tentang flag tersebut nanti.

Sama seperti \d dan \D, ada urutan karakter khusus lainnya juga.
 

1. Kalian bisa menggunakannya \w untuk mencocokkan karakter "kata" ("word") apa pun dalam sebuah string. Di sini, karakter kata mengacu pada A-Z, a-z, 0-9, dan _ . Jadi, pada dasarnya, itu akan cocok dengan semua digit, semua huruf kecil dan huruf besar, dan garis bawah. 
2. Kalian bisa menggunakan \W untuk mencocokkan karakter non-kata apa pun dalam sebuah string. Ini akan cocok dengan karakter seperti %, $, #, , dll. 
3. Kalian bisa menggunakan \s untuk mencocokkan satu karakter spasi putih (white space character), yang mencakup spasi, tab, umpan formulir (form feed), dan umpan baris (line feed). Demikian pula, kalian juga bisa menggunakan \S untuk mencocokkan semua karakter lain selain spasi. 
4. Kalian juga bisa mencari karakter spasi putih tertentu menggunakan \f, \n, \r, \t, dan \v, yang merupakan singkatan dari form feed, line feed, carriage return, horizontal tab, dan vertical tab.
   

Terkadang, kalian akan menghadapi situasi di mana kalian perlu mengganti kata dengan penggantinya, tetapi hanya jika itu bukan bagian dari kata yang lebih besar. Sebagai contoh, perhatikan kalimat berikut:

"Banyak gambar nanas yang diposting di aplikasi".

Dalam hal ini, kita ingin mengganti kata "aplikasi" dengan "papan" ("board"). Namun, menggunakan pola reguler expressions sederhana akan mengubah "apel" menjadi "boardle", dan kalimat terakhir akan menjadi:

"Banyak gambar pineboardle diposting di aplikasi".

Dalam kasus seperti itu, kalian bisa menggunakan urutan karakter khusus lainnya:  \b. Ini memeriksa batas kata. Batas kata dibentuk dengan menggunakan karakter non-kata seperti spasi, "$", "%", "#", dll. Namun, hati-hati ini juga mencakup karakter beraksen seperti "ü". 

 

1:  "A lot of pineapple images were posted on the app".replace(/app/, "board");  
2:  // A lot of pineboardle images were posted on the app  
3:  "A lot of pineapple images were posted on the app".replace(/\bapp/, "board");  
4:  // A lot of pineapple images were posted on the board  

Demikian pula, kalian juga menggunakan untuk mencocokkan batas non-kata. Misalnya, kalian bisa menggunakan untuk hanya mencocokkan "aplikasi" saat berada di dalam kata lain, seperti "nanas". \B\B

Mencocokkan Pola (Pattern) "n" Jumlah Kali (Number of Times)

Kalian bisa menggunakan ^ untuk memberi tahu JavaScript agar hanya melihat awal string untuk kecocokan. Demikian pula, kalian bisa menggunakan $ untuk hanya melihat akhir string untuk kecocokan.

Kalian bisa menggunakan * untuk mencocokkan expressions sebelumnya 0 kali atau lebih. Misalnya, /Ap*/ akan cocok dengan A , Ap , App , Appp , dan seterusnya.

Dengan cara yang sama, kalian bisa menggunakan + untuk mencocokkan expressions sebelumnya 1 kali atau lebih. Misalnya, /Ap+/ akan cocok dengan Ap , App , Appp , dan sebagainya. Expressions tidak akan cocok dengan single A kali ini.

Baca juga : Cara Memanggil Fungsi PHP Dari JavaScript Dan Sebaliknya

Terkadang, kalian hanya ingin mencocokkan jumlah kemunculan tertentu dari pola tertentu. Dalam kasus seperti itu, kalian harus menggunakan urutan karakter {n}, di mana n adalah angka. Misalnya, /Ap{2}/ akan cocok dengan App tetapi tidak Ap . Ini juga akan cocok dengan dua 'p pertama di Appp dan membiarkan yang ketiga tidak tersentuh.

Kalian bisa menggunakan {n,} untuk mencocokkan setidaknya 'n' kemunculan expressions yang diberikan. Ini berarti /Ap{2,}/ akan cocok dengan App tetapi tidak dengan Ap . Itu juga akan cocok dengan semua 'p' di Apppp dan menggantinya dengan string pengganti kalian.

Kalian juga bisa menggunakan {n,m} untuk menentukan jumlah minimum dan maksimum dan membatasi berapa kali expressions yang diberikan harus dicocokkan. Misalnya, /Ap{2,4}/ akan cocok dengan App , Appp , dan Apppp . Ini juga akan cocok dengan empat 'p pertama di Apppppp dan membiarkan sisanya tidak tersentuh.

1:  "Apppppples".replace(/Ap*/, "App");  
2:  // Apples  
3:  "Ales".replace(/Ap*/, "App");  
4:  // Apples  
5:  "Appppples".replace(/Ap{2}/, "Add");  
6:  // Addppples  
7:  "Appppples".replace(/Ap{2,}/, "Add");  
8:  // Addles  
9:  "Appppples".replace(/Ap{2,4}/, "Add");  
10:  // Addples  

Menggunakan Tanda Kurung (Parentheses) untuk Mengingat Kecocokan

Sejauh ini, kita hanya mengganti pola dengan string konstan. Misalnya, di bagian sebelumnya, penggantian yang kita gunakan selalu "Tambah". Terkadang, kalian harus mencari kecocokan pola di dalam string yang diberikan dan kemudian menggantinya dengan bagian dari pola tersebut.

Katakanlah kalian harus menemukan kata dengan lima atau lebih huruf dalam sebuah string dan kemudian menambahkan "s" di akhir kata. Dalam kasus seperti itu, kalian tidak akan dapat menggunakan nilai string konstan sebagai pengganti karena nilai akhir bergantung pada pola yang cocok itu sendiri.

1:  "I like Apple".replace(/(\w{5,})/, '$1s');  
2:  // I like Apples  
3:  "I like Banana".replace(/(\w{5,})/, '$1s');  
4:  // I like Bananas  

 

Ini adalah contoh sederhana, tetapi kalian bisa menggunakan teknik yang sama untuk menyimpan lebih dari satu pola yang cocok dalam memori. Jumlah sub-pola dalam kecocokan penuh akan ditentukan oleh jumlah tanda kurung yang digunakan.

Di dalam string pengganti, sub-kecocokan pertama akan diidentifikasi menggunakan $1, sub-kecocokan kedua akan diidentifikasi menggunakan $2, dan seterusnya. Berikut adalah contoh lain untuk lebih memperjelas penggunaan tanda kurung (parentheses).

 

1:  "I am looking for John and Jason".replace(/(\w+)\sand\s(\w+)/, '$2 and $1');  
2:  // I am looking for Jason and John  

 

Menggunakan Flag Dengan Regular Expressions

Seperti yang saya sebutkan di pendahuluan, satu lagi fitur penting dari regular expressions adalah penggunaan flag khusus (special flag) untuk mengubah cara pencarian dilakukan. Flag bersifat opsional, tetapi kalian bisa menggunakannya untuk melakukan hal-hal seperti membuat penelusuran menjadi global atau tidak peka huruf besar/kecil.

Ini adalah empat flag yang umum digunakan untuk mengubah cara JavaScript mencari atau mengganti string.

 

• g: Flag ini akan melakukan pencarian global alih-alih berhenti setelah kecocokan pertama (first match). 
• i: Flag ini akan melakukan pencarian tanpa memeriksa kecocokan kasus yang tepat. Misalnya, Apple, aPPLe, dan appPLE semuanya diperlakukan sama selama pencarian peka huruf besar/kecil. 
• m: Flag ini akan melakukan pencarian multi-baris. 
• y: Flag ini akan mencari kecocokan dalam indeks yang ditunjukkan oleh lastIndex properti.
  

Berikut adalah beberapa contoh regular expressions yang digunakan dengan flag: 

1:  "I eat apples, you eat apples".replace(/apples/, "mangoes");  
2:  // "I eat mangoes, you eat apples"  
3:  "I eat apples, you eat apples".replace(/apples/g, "mangoes");  
4:  // "I eat mangoes, you eat mangoes"  
5:  "I eat apples, you eat APPLES".replace(/apples/, "mangoes");  
6:  // "I eat mangoes, you eat APPLES"  
7:  "I eat apples, you eat APPLES".replace(/apples/gi, "mangoes");  
8:  // "I eat mangoes, you eat mangoes"  
9:  var stickyRegex = /apples/y;  
10:  stickyRegex.lastIndex = 3;  
11:  "I eat apples, you eat apples".replace(stickyRegex, "mangoes");  
12:  // "I eat apples, you eat apples"  
13:  var stickyRegex = /apples/y;  
14:  stickyRegex.lastIndex = 6;  
15:  "I eat apples, you eat apples".replace(stickyRegex, "mangoes");  
16:  // "I eat mangoes, you eat apples"  
17:  var stickyRegex = /apples/y;  
18:  stickyRegex.lastIndex = 8;  
19:  "I eat apples, you eat apples".replace(stickyRegex, "mangoes");  
20:  // "I eat apples, you eat apples"  

 

Kesimpulan

Tujuan dari tutorial ini adalah untuk memperkenalkan kalian pada regular expressions dalam JavaScript dan pentingnya mereka. Kita mulai dengan dasar-dasar dan kemudian membahas garis miring terbalik (backslash) dan karakter khusus lainnya. Kita juga belajar cara memeriksa pola berulang dalam string dan cara mengingat kecocokan sebagian dalam pola untuk menggunakannya nanti.

Terakhir, kita mempelajari tentang flag yang umum digunakan yang membuat regular expressions menjadi lebih kuat. Kalian bisa mempelajari lebih lanjut tentang regular expressions dalam artikel ini di MDN.

Jika ada sesuatu yang kalian ingin saya jelaskan dalam tutorial ini, jangan ragu untuk memberi tahu saya di komentar. 

 

See you next time :).