Articles
Pengenalan ke JavaScript
`RegExp` Object

`RegExp` Object

Artikel ini menjelaskan tentang objek RegExp.

Kami akan menjelaskan objek RegExp dengan contoh praktis.

YouTube Video

RegExp Object

Apa itu RegExp?

RegExp (Regular Expression) adalah objek yang digunakan untuk merepresentasikan pola string. Tidak seperti perbandingan karakter sederhana, Anda dapat secara fleksibel mendefinisikan 'string yang memenuhi kondisi tertentu.'.

Dengan menggunakan objek RegExp, Anda dapat melakukan operasi seperti mencari, memvalidasi, mengekstrak, dan mengganti string secara ringkas dan jelas. Ini sangat efektif untuk tugas sehari-hari seperti validasi input form, analisis log, dan pemformatan teks. Di bawah ini adalah beberapa contoh sederhana dari ekspresi reguler.

1const pattern = /abc/;
  • Ekspresi reguler ini memeriksa apakah urutan 'abc' ada di dalamnya.

Cara Membuat Ekspresi Reguler (Dua Metode)

Ada dua jenis sintaksis RegExp: notasi literal dan notasi konstruktor.

1// Literal notation: pattern and flags are written together
2const literal         = /hello/;
3const literalWithFlag = /hello/i;
4const literalDigits   = /\d+/;
5
6// Constructor notation: pattern and flags are passed separately
7const constructor         = new RegExp("hello");
8const constructorWithFlag = new RegExp("hello", "i");
9const constructorDigits   = new RegExp("\\d+");
  • Notasi literal itu singkat dan mudah dibaca, sehingga cocok untuk ekspresi reguler yang digunakan sebagai konstanta.. Di sisi lain, notasi konstruktor digunakan ketika Anda ingin membuat pola menggunakan variabel atau menentukan isinya saat runtime.
  • Dengan notasi literal, Anda dapat secara intuitif mendeskripsikan ekspresi reguler dan flag-nya secara bersamaan. Sebaliknya, dengan notasi konstruktor, Anda harus menentukan pola dan flag secara terpisah.
  • Selain itu, dengan notasi konstruktor, Anda memasukkan ekspresi reguler sebagai string, sehingga tanda backslash harus di-escape dua kali.

test(): Validasi Paling Dasar

Objek RegExp menyediakan metode untuk melakukan evaluasi dan operasi menggunakan ekspresi reguler. test() adalah metode yang mengembalikan nilai boolean apakah pola cocok atau tidak.

1const regex = /JavaScript/;
2
3console.log(regex.test("I love JavaScript")); // true
4console.log(regex.test("I love TypeScript")); // false
  • Ini adalah metode pertama yang harus Anda pelajari, dan sangat ideal untuk percabangan kondisional atau validasi masukan.

match(): Mendapatkan Hasil yang Cocok

match() mengembalikan array yang berisi string yang cocok beserta informasi detailnya.

1const text = "Version 1.2.3";
2const result = text.match(/\d+\.\d+\.\d+/);
3
4console.log(result[0]); // "1.2.3"
  • match() lebih nyaman daripada test() untuk proses ekstraksi dan penguraian.

replace(): Mengganti Menggunakan Ekspresi Reguler

replace() mengubah bagian yang cocok menjadi string lain.

1const text = "Hello   World";
2const result = text.replace(/\s+/g, " ");
3
4console.log(result); // "Hello World"
  • Anda dapat menggunakannya untuk pemformatan log atau menormalkan spasi yang tidak perlu.

Dasar-dasar Flag (g, i, m)

Anda dapat menentukan 'flag' dalam ekspresi reguler. Flag adalah opsi yang mengontrol bagaimana ekspresi reguler memproses string sesuai dengan aturan tertentu. Bahkan dengan pola yang sama, hasilnya dapat berubah tergantung pada flag yang digunakan.

1const text = "apple Apple APPLE";
2const regex = /apple/gi;        // or new RegExp("apple", "gi");
3
4console.log(text.match(regex)); // ["apple", "Apple", "APPLE"]
  • Flag g (global) mencari di seluruh bagian string.
  • Flag i (ignore case) mengabaikan perbedaan huruf besar/kecil saat mencocokkan.
1const multilineText = `apple
2banana
3apple`;
4
5const regexM = /^apple/gm;
6
7console.log(multilineText.match(regexM)); // ["apple", "apple"]
  • Flag m (multiline) digunakan untuk memperlakukan string multi-baris berdasarkan setiap barisnya. Dengan ini, ^ dan $ beroperasi berdasarkan awal atau akhir setiap baris, bukan seluruh string.

Kelas Karakter: Menggabungkan Beberapa Kandidat

Dengan menggunakan tanda kurung siku [], Anda dapat mendefinisikan kumpulan karakter yang mungkin untuk satu posisi.

1const regex = /gr[ae]y/;
2
3console.log(regex.test("gray")); // true
4console.log(regex.test("grey")); // true
  • Ini berguna untuk mengakomodasi variasi ejaan dan alternatif sederhana.

Metakarakter: Jalan Pintas Umum

Metakarakter adalah simbol yang memungkinkan Anda menulis pola yang sering digunakan dalam bentuk yang lebih singkat.

1const regex = /\d{4}-\d{2}-\d{2}/;  // or new RegExp("\\d{4}-\\d{2}-\\d{2}");
2
3console.log(regex.test("2025-12-29")); // true
  • \d berarti satu angka, dan {n} menentukan jumlah pengulangan.

^ dan $: Memvalidasi Seluruh String

^ dan $ merepresentasikan awal dan akhir dari sebuah string.

1const regex = /^\d+$/;
2
3console.log(regex.test("123"));   // true
4console.log(regex.test("123a"));  // false
  • Mereka penting dalam situasi di mana diperlukan kecocokan yang tepat, seperti pada input formulir.

Pengelompokan dan Penangkapan

Dengan menggunakan tanda kurung (), Anda dapat mengekstrak nilai parsial.

1const text = "2025/12/29";
2const regex = /(\d{4})\/(\d{2})\/(\d{2})/;
3const [, year, month, day] = text.match(regex);
4
5console.log(year, month, day); // 2025 12 29
  • Ini sering digunakan untuk memecah tanggal dan string yang terstruktur.

Kesalahan Umum dan Poin yang Harus Diperhatikan

Ekspresi reguler sangat kuat, tetapi cenderung menjadi sulit dibaca.

1// Hard to read
2const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+$/;
  • Jika menjadi terlalu kompleks, Anda dapat mempertimbangkan untuk menambahkan komentar, membagi ekspresi, atau meninjau ulang prosesnya sendiri.

Ringkasan

RegExp adalah fitur dasar penting dalam JavaScript untuk mendeskripsikan pemrosesan string secara sederhana dan akurat. Anda tidak perlu mempelajari ekspresi reguler yang kompleks sejak awal; penting untuk menggunakan metode dan sintaks dasar seperti test, match, dan replace sesuai kebutuhan praktis Anda. Jika Anda dapat menganggap ekspresi reguler bukan sebagai 'pengetahuan khusus' tetapi sebagai 'alat untuk merepresentasikan pola secara terstruktur', Anda akan sangat meningkatkan kualitas dan keterbacaan validasi input dan pemrosesan teks.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Objek `Date`