JavaScript Regex Cheat Sheet

Dayat Miftahul Jannah
4:08:11 PM

Berhasil bekerja dengan regular expressions mengharuskan kalian untuk mengetahui apa yang dilakukan setiap karakter, flag, dan metode khusus. Ini adalah regular expressions cheat sheet yang bisa kalian jadikan rujukan ketika mencoba mengingat cara kerja metode, karakter khusus, atau flag dalam regular expressions atau regex.

Mendefinisikan Regular Expressions dalam JavaScript

Ada dua cara untuk mendefinisikan regular expressions dalam JavaScript.
 
  • var rgx = /^(\d+)/  - Kalian bisa menggunakan regular expressions literal dan menyertakan pola di antara garis miring (slashes). Ini dievaluasikan pada waktu kompilasi (compile) dan memberikan kinerja yang lebih baik jika regular expressions tetap konstan. 
  • var rgx = new RegExp('^(\d+)') - Fungsi konstruktor berguna ketika regular expressions dapat berubah secara terprogram. Ini dikompilasi (compile) selama runtime.

Mencocokkan Set Karakter Tertentu

Urutan berikut dapat digunakan untuk mencocokkan serangkaian karakter tertentu.
 
  •  \w - Mencocokkan semua karakter kata. Karakter kata adalah alfanumerik (a-z, karakter A-Z, dan garis bawah[underscore]). 
  • \W - Mencocokkan karakter non-kata. Semuanya kecuali karakter alfanumerik dan garis bawah (uderscore). 
  •  \d - Mencocokkan karakter digit. Setiap digit dari 0 hingga 9. 
  •  \D - Mencocokkan karakter non-digit. Semuanya kecuali 0 hingga 9. 
  • \s - Mencocokkan karakter spasi putih (white space). Ini termasuk spasi, tab, dan jeda baris (line breaks). 
  • \S  - Mencocokkan semua karakter lain kecuali spasi. 
  • .  - Mencocokkan karakter apa pun kecuali jeda baris (line breaks). 
  • [A-Z] - Mencocokkan karakter dalam rentang (range). Misalnya, [A-E] akan cocok dengan A, B, C, D, dan E. 
  • [ABC] - Mencocokkan karakter dalam set yang diberikan. Misalnya, [AMT] hanya akan cocok dengan A, M, dan T. 
  • [^ABC] - Mencocokkan semua karakter yang tidak ada di set yang diberikan. Misalnya, [^A-E] akan cocok dengan semua karakter lain kecuali A, B, C, D, dan E.

Baca juga : Panduan Untuk Pemula Mengenai Reguler Expressions (Regex) dalam JavaScript


Menentukan Jumlah Karakter yang Akan Dicocokkan

Semua expressions di atas akan cocok dengan satu karakter pada satu waktu. Kalian bisa menambahkan quantifier untuk menentukan berapa banyak karakter yang harus disertakan dalam kecocokan (match) sekaligus.
 
  • + - Mencocokkan satu atau lebih kemunculan token sebelumnya (preceding token). Misalnya, \w+ akan mengembalikan ABD12D sebagai satu kecocokan, bukan enam kecocokan yang berbeda. 
  • * -  Mencocokkan nol atau lebih kemunculan token sebelumnya (preceding token). Misalnya , cocokkan b\w*  bagian yang dicetak tebal (bold) di b , bat , bajhdsf bfjhbe . Pada dasarnya, ini cocok dengan nol atau lebih karakter kata setelah 'b'.
  •  {m, n} - Mencocokkan setidaknya m dan paling banyak n kemunculan token sebelumnya. {m,} akan cocok dengan setidaknya kemunculan m, dan tidak ada batas atas kecocokan tersebut. {k} akan sama persis dengan k kejadian dari token sebelumnya. 
  • ? - Mencocokkan nol atau satu kemunculan karakter sebelumnya. Misalnya, ini berguna saat mencocokkan dua variasi ejaan untuk karya yang sama. Misalnya,  /behaviou?r/ akan cocok dengan behavior dan behaviour. 
  • | Mencocokkan expressions sebelum atau sesudah karakter pipe. Misalnya, /se(a|e)/ cocok dengan see  dan sea.

Regular Expressions Terkait Tanda Kurung (Parenthesis-Related)

  • (ABC) - Ini akan mengelompokkan beberapa token bersama-sama dan mengingat substring yang cocok dengannya untuk digunakan nanti. Ini disebut kelompok penangkap (capturing group)
  • (?:ABC) - Ini juga akan mengelompokkan beberapa token bersama tetapi tidak akan mengingat kecocokannya. Ini adalah grup yang tidak menangkap (non-capturing group). 
  • \d+(?=ABC) - Ini akan cocok dengan token yang mendahului bagian (?=ABC) yang hanya jika diikuti oleh ABC. Bagian ABC tidak akan disertakan dalam match. Bagian \d hanyalah sebuah contoh. Itu bisa berupa string reguler expressions lainnya. 
  • \d+(?!ABC) - Ini akan cocok dengan token yang mendahului bagian (?!ABC) yang hanya jika tidak diikuti oleh ABC. Bagian ABC tidak akan disertakan dalam match. Bagian \d hanyalah sebuah contoh. Itu bisa berupa string reguler expressions lainnya.

Karakter Regular Expressions Lainnya

Ada juga beberapa karakter reguler expressions lainnya yang belum dibahas di bagian sebelumnya:

  • ^ — Mencari reguler expressions di awal string atau awal baris jika flag multiline diaktifkan. 
  • $ — Mencari reguler expressions di akhir string atau akhir baris jika flag multiline diaktifkan. 
  •  \b — Mencocokkan token sebelumnya hanya jika ada batas kata. 
  • \B — Mencocokkan token sebelumnya hanya jika tidak ada batas kata.

Menggunakan Flag Dengan Reguler Expressions

Flag bisa digunakan untuk mengontrol bagaimana reguler expressions harus ditafsirkan. Kalian bisa menggunakan flag baik sendiri atau bersama-sama dalam urutan apa pun yang kalian inginkan. Ini adalah lima flag yang tersedia di JavaScript. 
 
  • g — Mencari string untuk semua kecocokan expressions yang diberikan alih-alih hanya mengembalikan yang pertama. 
  • i — Jadikan pencarian peka huruf besar/kecil sehingga kata-kata seperti Apple, aPPLe, dan apple semuanya dapat dicocokkan sekaligus. 
  • m— Flag ini akan memastikan bahwa ^ dan token $ mencari kecocokan di awal atau akhir setiap baris, bukan seluruh string. 
  • u — Flag ini akan memungkinkan kalian untuk menggunakan titik kode Unicode lolos dalam reguler expressions kalian. 
  • y — Ini akan memberi tahu JavaScript untuk hanya mencari kecocokan pada posisi saat ini di string target.

Kalian bisa menentukan flag untuk reguler expressions dalam JavaScript baik dengan menambahkannya ke akhir literal reguler expressions atau dengan meneruskannya ke RegExp konstruktor. Misalnya,  /cat/i mencocokkan semua kemunculan cat terlepas dari kasusnya, dan RegExp("cat", 'i') melakukan hal yang sama.

Metode Reguler Expressions yang Berguna dalam JavaScript

Reguler expressions yang kalian buat menggunakan flag dan urutan karakter yang telah kita bahas sejauh ini dimaksudkan untuk digunakan dengan metode berbeda untuk mencari (search), mengganti (replace), atau membagi (split) string. Berikut adalah beberapa metode yang terkait dengan reguler expressions.
 
test() — Memeriksa apakah string utama berisi substring yang cocok dengan pola yang ditentukan oleh reguler expressions yang diberikan. Ini kembali true pada match yang berhasil dan false sebaliknya. 
 
1:  var textA = 'I like APPles very much';  
2:  var textB = 'I like APPles';  
3:  var regexOne = /apples$/i  
4:  // Output : false  
5:  console.log(regexOne.test(textA));  
6:  // Output : true  
7:  console.log(regexOne.test(textB));

Dalam contoh di atas, reguler expressions seharusnya mencari kata apel hanya di akhir string. Itu sebabnya kita masuk false dalam kasus pertama.
 
search() — Memeriksa apakah string utama berisi substring yang cocok dengan pola yang ditentukan oleh reguler expressions yang diberikan. Ini mengembalikan indeks match pada keberhasilan dan -1 sebaliknya.

1:  var textA = 'I like APPles very much';  
2:  var regexOne = /apples/;  
3:  var regexTwo = /apples/i;  
4:  // Output : -1  
5:  console.log(textA.search(regexOne));  
6:  // Output : 7  
7:  console.log(textA.search(regexTwo));

Dalam hal ini, reguler expressions pertama mengembalikan -1 karena tidak ada pencocokan peka huruf besar-kecil yang tepat
 
match() — Mencari jika string utama berisi substring yang cocok dengan pola yang ditentukan oleh reguler expressions yang diberikan. Jika flag g diaktifkan, beberapa kecocokan akan dikembalikan sebagai array.
 
1:  var textA = 'All I see here are apples, APPles and apPleS';  
2:  var regexOne = /apples/gi;  
3:  // Output : [ "apples", "APPles", "apPleS" ]  
4:  console.log(textA.match(regexOne));

exec() — Mencari jika string utama berisi substring yang cocok dengan pola yang ditentukan oleh reguler expressions yang diberikan. Array yang dikembalikan akan berisi informasi tentang grup yang cocok dan menangkap (capturing groups).

1:  var textA = 'Do you like apples?';  
2:  var regexOne = /apples/;  
3:  // Output : apples  
4:  console.log(regexOne.exec(textA)[0]);  
5:  // Output : Do you like apples?  
6:  console.log(regexOne.exec(textA).input);

replace() — Mencari substring yang cocok dengan pola yang diberikan dan ganti dengan string pengganti yang disediakan.
 
1:  var textA = 'Do you like aPPles?';  
2:  var regexOne = /apples/i  
3:  // Output : Do you like mangoes?  
4:  console.log(textA.replace(regexOne, 'mangoes'));

split() — Metode ini akan memungkinkan kalian untuk membagi string utama menjadi substring berdasarkan pemisah yang ditentukan sebagai reguler expressions.

1:  var textA = 'This 593 string will be brok294en at places where d1gits are.';  
2:  var regexOne = /\d+/g  
3:  // Output : [ "This ", " string will be brok", "en at places where d", "gits are." ]   
4:  console.log(textA.split(regexOne))

Kesimpulan

Dalam tutorial sebelumnya, saya telah membahas dasar-dasar reguler expressions serta beberapa expressions yang lebih rumit yang terbukti berguna sesekali. Kedua tutorial ini menjelaskan cara kerja karakter atau urutan karakter yang berbeda dalam reguler expressions.

Jika kalian memiliki pertanyaan terkait tutorial ini, jangan segan-segan untuk meninggalkaan pertanyaan kalian di kolom komentar di bawah yah.

See you next time :)