Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Regular Expressions

JavaScript Regex Cheat Sheet

by
Read Time:7 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Lukman Nulhakim (you can also view the original English article)

Keberhasilan bekerja dengan ekspresi reguler mengharuskan Anda untuk mengetahui apa yang dilakukan oleh setiap karakter khusus, flag dan method khusus. Ini adalah ekspresi reguler yang dapat menjadi rujukan ketika mencoba mengingat cara kerja dari method, karakter dan flag khusus.

Mendefinisikan Ekspresi Reguler dalam JavaScript

Ada dua cara untuk mendefinisikan ekspresi reguler dalam JavaScript.

  • var rgx = /^(\d+)/ — Anda dapat menggunakan ekspresi reguler secara literal dan menyertakan pola di antara garis miring. Ini dievaluasi pada waktu proses kompilasi dan memberikan kinerja yang lebih baik jika ekspresi reguler tetap konstan.
  • var rgx = new RegExp('^(\d+)') — Fungsi constructor berguna ketika ekspresi reguler dapat secara terprogram. Ini dikompilasi selama proses berjalan.

Mencocokkan Sekumpulan Karakter Tertentu

Urutan berikut dapat digunakan untuk mencocokkan satu kumpulan dari karakter tertentu.

  • \w — Mencocokkan semua karakter kata-kata. Karakter kata adalah alfanumerik (a-z, karakter A-Z, dan garis bawah).
  • \W — Mencocokkan karakter yang bukan kata. Semuanya kecuali karakter alfanumerik dan garis bawah.
  • \d — Mencocokkan karakter angka. Angka apa pun dari 0 hingga 9.
  • \D —  Mencocokkan karakter yang bukan angka. Semuanya kecuali 0 hingga 9.
  • \s — Mencocokkan karakter whitespace. Termasuk spasi, tab, dan jeda baris (line-break).
  • \S — Mencocokkan semua karakter lain kecuali karakter whitespace.
  • . — Mencocokkan karakter apapun kecuali jeda baris (line-break).
  • [A-Z] — Mencocokkan karakter dalam rentang. Misalnya, [A-E] akan cocok dengan A, B, C, D dan E.
  • [ABC] — Mencocokkan karakter dalam kumpulan tertentu. Misalnya, [AMT] hanya akan cocok dengan A, M, dan T.
  • [^ABC] — Mencocokkan semua karakter yang tidak ada dalam kumpulan. Misalnya, [^A-E] akan cocok dengan semua karakter lain kecuali A, B, C, D dan E.

Menentukan Jumlah Karakter yang Cocok

Semua ekspresi di atas pada saat yang bersamaan akan cocok dengan satu karakter. Anda dapat menambahkan quantifier (pembilang atau berapa banyak karakter yang akan dicari) untuk menentukan berapa banyak karakter yang harus dimasukkan dalam pencocokkan saat itu juga.

  • + — Mencocokkan satu atau lebih kemunculan dari beberapa token sebelumnya. Sebagai contoh, \w+ akan mengembalikan ABD12D sebagai satu kecocokan, bukan mencocokkan enam hal yang berbeda.
  • * — Mencocokkan nol atau beberapa kemunculan dari beberapa token sebelumnya. Misalnya, b\w* mencocokkan bagian tebal dalam b, batbajhdsfbfjhbe. Pada dasarnya, ini mencocokkan nol atau lebih banyak karakter kata setelah 'b'.
  • {m, n} — Mencocokkan minimal m dan maksimal n kemunculan yang dari token sebelumnya. {m,} akan cocok minimal dalam m kejadian, dan tidak ada batasan atas pencocokkan.{k} akan cocok dengan kemunculan k dari token sebelumnya.
  • ? — Mencocokkan nol atau satu kemunculan dari karakter sebelumnya. Misalnya, ini bisa berguna ketika mencocokkan dua variasi ejaan untuk pekerjaan yang sama. Misalnya, /behaviou?r/ akan cocok dengan behavior dan behaviour.
  • | — Mencocokkan ekspresi baik sebelum atau sesudah karakter percabangan. Sebagai contoh, /se(a|e)/ cocok dengan see dan sea.

Ekspresi Reguler yang Terkait dengan Tanda Kurung

  • (ABC) — Ini akan mengelompokkan beberapa token bersamaan dan mengingat substring yang dicocokkan oleh mereka untuk digunakan nanti. Ini disebut grup penangkap.
  • (?:ABC) — Ini juga akan mengelompokkan beberapa token bersamaan tetapi tidak akan mengingat pencocokkan. Ini adalah grup yang tidak melakukan proses penangkapan.
  • \d+(?=ABC) — Ini akan cocok dengan token (banyak token) hanya sebelum bagian (?=ABC) jika diikuti oleh ABC. Bagian ABC itu tidak akan dimasukkan dalam pencocokkan. Bagian \d ini hanyalah sebuah contoh. Itu bisa berupa string ekspresi reguler lainnya.
  • \d+(?!ABC) — Ini akan cocok dengan token (banyak token) hanya sebelum bagian (?!ABC) jika tidak diikuti ABC. Bagian ABC itu tidak akan dimasukkan dalam pencocokkan. Bagian \d ini hanyalah sebuah contoh. Itu bisa berupa string ekspresi reguler lainnya.

Karakter Ekspresi Reguler Lainnya

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

  • ^ — Mencari ekspresi reguler di awal string atau awal baris jika flag multiline diaktifkan.
  • $ — Mencari ekspresi reguler 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 ada tidak ada batas kata.

Menggunakan Flag dengan Ekspresi Reguler

Flag dapat digunakan untuk mengontrol bagaimana ekspresi reguler harus diartikan. Anda dapat menggunakan flag sendiri atau bersama-sama dalam urutan apa pun yang Anda inginkan. Ini adalah lima flag yang tersedia di JavaScript. 

  • g — Mencari string untuk semua pencocokkan ekspresi yang diberikan sebagai gantinya hanya akan mengembalikan yang pertama.
  • i — Membuat pencarian menjadi case sensitif sehingga kata-kata seperti Apple, aPPLe, dan apel semuanya bisa dicocokkan sekaligus.
  • m — Flag ini akan memastikan bahwa token ^ dan $ mencari kecocokan di awal atau akhir setiap baris, bukan seluruh string.
  • u — Flag ini akan memungkinkan Anda untuk menggunakan titik kode Unicode yang lolos dalam ekspresi reguler Anda.
  • y — Ini akan memberitahu JavaScript untuk hanya mencari kecocokan pada posisi saat ini dalam target string.

Anda dapat menentukan flag untuk ekspresi reguler dalam JavaScript dengan menambahkannya ke akhir ekspresi reguler secara harfiah atau dengan meneruskannya ke konstruktor RegExp. Misalnya, /cat/i mencocokkan semua kemunculan cat terlepas dari huruf besar, dan RegExp("cat", 'i') melakukan hal yang sama.

Method Ekspresi Reguler yang Berguna dalam JavaScript

Ekspresi reguler yang Anda buat menggunakan flag dan urutan karakter yang telah kita diskusikan sejauh ini dimaksudkan untuk digunakan dengan method yang berbeda untuk mencari, mengganti atau membagi string. Berikut beberapa method yang terkait dengan ekspresi reguler.

  • test() — Memeriksa apakah string utama berisi substring yang cocok dengan pola yang ditentukan oleh ekspresi reguler yang diberikan. Ini mengembalikan nilai true pada pencocokan yang sukses dan false jika sebaliknya.

Dalam contoh di atas, ekspresi reguler seharusnya mencari kata apples hanya di ujung string. Itu sebabnya kami memperoleh nilai false dalam kasus yang pertama.

  • search() —  Memeriksa apakah string utama berisi substring yang cocok dengan pola yang ditentukan oleh ekspresi reguler yang diberikan. Ini mengembalikan indeks pencocokan pada keberhasilan dan -1 jika sebaliknya.

Dalam hal ini, ekspresi reguler pertama menghasilkan nilai -1 karena tidak ada kecocokan case sensitif yang tepat.

  • match() — Melakukan pencarian jika string utama berisi substring yang cocok dengan pola yang ditentukan oleh ekspresi reguler yang diberikan. Jika flag g diaktifkan, beberapa pencocokan akan dikembalikan sebagai array
  • exec() — Melakukan pencarian jika string utama berisi substring yang cocok dengan pola yang ditentukan oleh ekspresi reguler yang diberikan. Array yang dikembalikan akan berisi informasi tentang kecocokan dan kelompok penangkap.
  • replace() — Melakukan pencarian substring yang cocok dengan pola yang diberikan dan mengganti dengan string pengganti yang disediakan.
  • split() — Method ini akan memungkinkan Anda untuk membagi string utama menjadi substring berdasarkan pemisah yang ditetapkan sebagai ekspresi reguler.

Kesimpulan

Dalam tutorial sebelumnya, saya telah membahas dasar -  dasar ekspresi reguler serta beberapa ekspresi yang lebih rumit yang ternyata dapat bermanfaat sesekali. Kedua tutorial ini menjelaskan bagaimana karakter atau urutan karakter yang berbeda berfungsi dalam ekspresi reguler.

Jika ekspresi reguler masih membingungkan Anda, saran saya adalah teruslah berlatih dan lihat bagaimana orang lain hadir dengan ekspresi reguler untuk membuat pola tertentu.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.