Apakah kamu pernah ingin mencari pola tertentu di dalam teks, memvalidasi input form, atau memproses data string dengan cepat di JavaScript? Jika iya, Regular Expression atau yang sering disingkat Regex adalah alat yang tepat untuk kamu pelajari. Regex memungkinkan kamu menemukan, memeriksa, dan memanipulasi teks dengan cara yang jauh lebih efisien dibandingkan menggunakan logika string biasa.
Dalam artikel ini, kita akan membahas Regex JavaScript secara lengkap, mulai dari dasar-dasar, metode populer seperti test, match, replace, hingga penggunaan regex untuk validasi email, nomor telepon, password, dan berbagai kasus praktis lainnya. Panduan ini dibuat langkah demi langkah, cocok untuk pemula maupun pengembang web yang ingin memperdalam kemampuan pattern matching dan optimasi regex di proyek nyata.
Daftar isi
Baca juga: Error Handling di JavaScript: Try, Catch, Finally
Pengenalan Regular Expression
Pengenalan Regular Expression (Regex) adalah langkah pertama untuk memahami bagaimana pola teks bekerja dalam JavaScript. Regex merupakan sebuah pola karakter yang digunakan untuk mencari, mencocokkan, dan memanipulasi string dengan cara yang efisien. Dibandingkan metode pencarian teks biasa, regex menawarkan fleksibilitas dan kekuatan yang jauh lebih besar—mulai dari pencarian sederhana hingga validasi input kompleks seperti email, nomor telepon, dan password.
Dalam JavaScript, regular expression sudah terintegrasi secara native, sehingga penggunaannya sangat mudah dan tidak memerlukan library tambahan. Materi pengenalan ini akan membahas apa itu regex, bagaimana sejarahnya digunakan dalam berbagai bahasa pemrograman, keunggulannya di JavaScript, hingga contoh studi kasus pencarian teks. Dengan memahami dasar pengenalan regex, kamu akan mampu menggunakan pattern matching dengan lebih percaya diri dan efisien saat membangun aplikasi web modern.
1. Apa itu Regular Expression
Regular Expression atau Regex adalah sebuah pola (pattern) yang digunakan untuk mencari, mencocokkan, dan memanipulasi teks. Dalam JavaScript, regex sangat berguna untuk memvalidasi input, menemukan karakter tertentu, memfilter data, hingga melakukan transformasi teks dengan cara yang jauh lebih efisien dibandingkan metode string biasa. Regex bekerja dengan cara mencocokkan pola tertentu pada string, seperti huruf, angka, simbol, atau kombinasi kompleks.
Dalam pengembangan web modern, regex menjadi salah satu alat penting karena mampu menghemat banyak waktu dan baris kode. Dengan satu pola regex, kamu dapat menyelesaikan tugas yang biasanya membutuhkan kondisi if bertingkat atau loop yang panjang.
2. Sejarah dan penggunaan regex di berbagai bahasa pemrograman
Regular Expression pertama kali diperkenalkan pada tahun 1950-an oleh ilmuwan bernama Stephen Cole Kleene, yang mengembangkan teori matematika tentang pola simbolik. Konsep ini kemudian diadopsi ke dunia pemrograman dan digunakan dalam berbagai utilitas sistem seperti grep, sed, dan awk.
Saat ini, regex digunakan secara luas di berbagai bahasa pemrograman populer seperti:
- JavaScript
- Python
- PHP
- Java
- C#
- Ruby
- Perl (bahasa yang dikenal sangat kuat dalam regex)
Meskipun sintaks regex bersifat universal, beberapa bahasa memiliki fitur tambahan atau variasi kecil. Namun secara keseluruhan, dasar penggunaannya tetap sama: membantu developer mengolah teks secara cepat dan efisien.
3. Keunggulan menggunakan regex di JavaScript
JavaScript memiliki dukungan bawaan (native) untuk Regular Expression melalui RegExp object, sehingga penggunaannya sangat fleksibel dan mudah diintegrasikan ke berbagai fungsi string. Berikut beberapa keunggulan utama menggunakan regex di JavaScript:
Native support
Tidak perlu menginstal library tambahan, cukup gunakan/pattern/ataunew RegExp().Integrasi kuat dengan metode string
Regex dapat digunakan langsung di method sepertimatch(),replace(),search(), dansplit().Performa tinggi
Regex memungkinkan operasi pencarian dan validasi dilakukan lebih cepat dibandingkan logika manual.Lebih ringkas dan efisien
Alih-alih menulis banyak kondisi, cukup gunakan satu pola regex untuk hasil yang sama.Cocok untuk validasi input modern
Mulai dari email, password, nomor telepon, hingga format tanggal.
Dengan berbagai keunggulan ini, regex menjadi alat yang sangat penting bagi developer JavaScript—baik backend, frontend, maupun full stack.
4. Studi kasus sederhana: pencarian teks
Salah satu penggunaan paling dasar dari regex adalah mencari teks. Misalnya, kamu ingin mencari apakah sebuah kata muncul dalam sebuah kalimat. Dengan regex, ini bisa dilakukan dalam satu baris:
const text = "Belajar regex di JavaScript memang menyenangkan!";
const pattern = /regex/;
console.log(pattern.test(text)); // trueCode language: JavaScript (javascript)Contoh lain: mencari semua huruf vokal dalam sebuah string.
const kalimat = "Regular Expression sangat berguna!";
const vokal = kalimat.match(/[aeiou]/gi);
console.log(vokal);
// Output: ["e", "u", "a", "E", "e", "i", "o", "a", "a", "e", "u", "a"]Code language: JavaScript (javascript)Penggunaan sederhana ini menggambarkan kekuatan regex sebagai alat pencarian dan analisis teks dengan cara yang cepat dan efisien.
Sintaks Dasar Regex di JavaScript
Sintaks adalah fondasi utama dalam memanfaatkan regular expression JavaScript. Untuk dapat membuat pola yang akurat dan efisien, kamu perlu memahami cara membuat regex, karakter dasar yang digunakan, hingga bagaimana flags bekerja dalam proses pencarian. Bagian ini akan membantu kamu memahami konsepnya secara bertahap.
1. Membuat Regex: Literal vs Constructor
Dalam JavaScript, regex dapat dibuat dengan dua cara:
1. Regex Literal
Cara paling umum dan simpel.
const regex = /hello/;Code language: JavaScript (javascript)Keunggulannya:
- Lebih mudah dibaca
- Lebih cepat dituliskan
- Ideal untuk pola statis
2. Regex Constructor
Digunakan saat pola regex bersifat dinamis (dibuat dari variable).
const pattern = "hello";
const regex = new RegExp(pattern, "g");Code language: JavaScript (javascript)Keunggulannya:
- Mudah untuk membuat pola runtime
- Dapat menggabungkan nilai variable ke dalam regex
Namun syntax-nya sedikit lebih panjang, dan kamu perlu melakukan escape ekstra saat menggunakan karakter khusus.
2. Karakter Biasa dan Meta Character
Regex terdiri dari dua jenis karakter:
1. Karakter Biasa
Digunakan untuk mencocokkan karakter apa adanya. Contoh:
a→ mencari huruf “a”cat→ mencari kata “cat”
2. Meta Character (Karakter Khusus)
Digunakan untuk memberi arti tertentu pada pola regex.
Contoh meta character penting:
| Meta | Arti |
|---|---|
. | Mencocokkan sembarang 1 karakter |
\d | Digit 0–9 |
\w | Alphanumeric + underscore |
\s | Whitespace |
^ | Awal string |
$ | Akhir string |
* | 0 atau lebih pengulangan |
+ | 1 atau lebih pengulangan |
? | Opsional (0 atau 1 kali) |
[] | Character set |
() | Grouping / capturing |
Meta character inilah yang membuat regex JavaScript begitu fleksibel dan kuat dalam pattern matching.
3 Flags Regex (g, i, m)
Flags adalah penanda tambahan yang mengubah perilaku regex.
1. g — global
Mencari semua hasil, bukan hanya satu.
"hello hello".match(/hello/g);Code language: JavaScript (javascript)2. i — case insensitive
Mengabaikan huruf kapital atau kecil.
/hello/i.test("HELLO"); // trueCode language: JavaScript (javascript)3. m — multiline
Memperlakukan ^ dan $ sebagai awal/akhir setiap baris, bukan keseluruhan string.
/^hi/m.test("hello\nhi"); // trueCode language: JavaScript (javascript)Flags dapat digabungkan:
/hello/gi;4. Escape Character dan Special Character
Karena regex memiliki banyak karakter khusus, kamu perlu melakukan escape menggunakan \ ketika ingin mencocokkannya secara literal.
Contoh karakter yang harus di-escape:
. * + ? ^ $ { } ( ) | [ ] \Contoh penggunaan:
const regex = /\./; // mencari titik "."Code language: JavaScript (javascript)Jika menggunakan constructor:
const regex = new RegExp("\\.");Code language: JavaScript (javascript)Karena constructor juga menggunakan escape string JavaScript, kamu harus menggandakan backslash.
Metode Regex di JavaScript
Setelah memahami sintaks dasar regex di JavaScript, langkah berikutnya adalah mempelajari berbagai metode bawaan JavaScript yang sering digunakan bersama regular expression. Metode-metode ini adalah alat utama yang akan kamu pakai untuk melakukan pencocokan pola, mencari teks, memecah string, hingga memodifikasi teks.
Di bagian ini, kita akan membahas semua metode penting yang wajib dikuasai:
test()match()replace()search()split()
Setiap metode memiliki fungsi berbeda dan sangat berguna dalam berbagai situasi pemrograman.
1. test() → Cek Pattern
Metode test() digunakan untuk mengetahui apakah sebuah string cocok dengan pola regex. Metode ini akan mengembalikan:
truejika ada kecocokanfalsejika tidak ada kecocokan
Contoh:
const regex = /hello/;
console.log(regex.test("hello world")); // trueCode language: JavaScript (javascript)Cocok digunakan untuk validasi sederhana, seperti:
- cek apakah input mengandung angka
- cek apakah password mengandung huruf besar
- cek apakah username valid
Contoh validasi angka:
const numberCheck = /\d/;
console.log(numberCheck.test("aris123")); // trueCode language: JavaScript (javascript)2. match() → Mengambil Hasil Cocok
Metode match() digunakan untuk mengambil semua hasil yang cocok dengan pola tertentu. Jika regex memiliki flag g, hasilnya berupa array semua kecocokan. Tanpa g, hasilnya akan mengembalikan informasi detail termasuk capturing group.
Contoh tanpa flag g:
const text = "Hello JavaScript";
const result = text.match(/Java/);
console.log(result);Code language: JavaScript (javascript)Outputnya:
- hasil kecocokan
- index ditemukan
- input asli
Contoh dengan flag g:
const text = "apple, banana, apple, mango";
const result = text.match(/apple/g);
console.log(result); // ["apple", "apple"]Code language: JavaScript (javascript)Metode ini sangat membantu saat mengambil data seperti:
- list kata tertentu
- semua angka dalam string
- format tertentu (email, URL)
3. replace() → Mengganti Teks
Metode replace() digunakan untuk mengganti bagian string yang cocok dengan regex. Fungsi ini sangat sering dipakai dalam pengolahan teks.
Contoh mengganti satu kata:
const text = "Halo dunia!";
console.log(text.replace(/dunia/, "JavaScript"));Code language: JavaScript (javascript)Contoh mengganti banyak kata (pakai flag g):
const text = "apple banana apple mango";
const result = text.replace(/apple/g, "orange");
console.log(result);Code language: JavaScript (javascript)Contoh mengganti pola spesifik:
const text = "ID: 123-456";
console.log(text.replace(/\d/g, "*")); // "ID: ***-***"Code language: JavaScript (javascript)replace() juga mendukung fungsi callback untuk penggantian yang lebih dinamis.
4. search() → Menemukan Index Pattern
Metode search() digunakan untuk menemukan index pertama dari pattern yang cocok dengan regex. Berbeda dengan match(), metode ini hanya mengembalikan:
- posisi index hasil kecocokan pertama, atau
- -1 jika tidak ditemukan
Contoh:
const text = "JavaScript sangat keren";
console.log(text.search(/keren/)); // 17Code language: JavaScript (javascript)Metode ini sangat cocok jika kamu hanya ingin tahu posisi pertama tanpa butuh data detail lain.
5. split() → Memecah String Berdasarkan Pattern
Metode split() digunakan untuk memecah string menjadi array berdasarkan pola regex. Ini lebih fleksibel daripada split biasa yang hanya bisa menggunakan string.
Contoh memecah berdasarkan spasi:
const text = "belajar regex javascript lengkap";
const result = text.split(/\s+/);
console.log(result);Code language: JavaScript (javascript)Contoh memecah berdasarkan koma dengan optional spasi:
const list = "apel, jeruk, mangga, pisang";
const result = list.split(/,\s*/);
console.log(result);Code language: JavaScript (javascript)Contoh mengambil angka dari teks:
const data = "ID-123-456-789";
const numbers = data.split(/\D+/);
console.log(numbers); // ["", "123", "456", "789"]Code language: JavaScript (javascript)Pattern Matching Lanjutan
Setelah memahami dasar-dasar regex, kini saatnya masuk ke bagian yang lebih seru yaitu pattern matching lanjutan. Di sini kamu akan belajar berbagai teknik yang membuat Regular Expression JavaScript menjadi sangat fleksibel dan kuat. Mulai dari character class, quantifiers, anchors, hingga grouping dan alternation. Semua konsep ini akan memperluas kemampuanmu dalam membuat pola yang lebih kompleks.
Character Class [abc], [^abc]
Apa itu Character Class?
Character class adalah fitur regex yang memungkinkan kamu mencocokkan satu karakter dari beberapa kemungkinan karakter.
Contoh [abc]:
Pola ini berarti mencocokkan salah satu karakter: a, b, atau c.
const regex = /[abc]/;
console.log(regex.test("aris")); // true (ada huruf a)Code language: JavaScript (javascript)[a-z]
Rentang karakter dari a sampai z.
const regex = /[a-z]/;Code language: JavaScript (javascript)Negated Class [^abc]
^ di dalam bracket berarti bukan salah satu dari a, b, atau c.
const regex = /[^abc]/;
console.log(regex.test("ddd")); // true (karena bukan a b c)Code language: JavaScript (javascript)Quantifiers *, +, ?, {n}, {n,m}
Quantifier digunakan untuk menentukan jumlah kemunculan dari sebuah karakter atau grup.
* → 0 atau lebih
const regex = /a*/;
console.log("aaa".match(regex)); // ["aaa"]Code language: JavaScript (javascript)+ → 1 atau lebih
const regex = /a+/;
console.log("baaa".match(regex)); // ["aaa"]Code language: JavaScript (javascript)? → 0 atau 1 (opsional)
const regex = /colou?r/;
console.log("color".match(regex)); // ["color"]
console.log("colour".match(regex)); // ["colour"]Code language: JavaScript (javascript){n} → tepat n kali
const regex = /\d{3}/;
console.log("Kode: 123".match(regex)); // ["123"]Code language: JavaScript (javascript){n,} → minimal n kali
const regex = /\d{2,}/;
console.log("12345".match(regex)); // ["12345"]Code language: JavaScript (javascript){n,m} → antara n hingga m kali
const regex = /\d{2,4}/;
console.log("12345".match(regex)); // ["1234"]Code language: JavaScript (javascript)Anchors ^, $, \b, \B
Anchors digunakan untuk mencocokkan posisi dalam string, bukan karakter.
^ → awal string
const regex = /^Hello/;
console.log(regex.test("Hello world")); // trueCode language: JavaScript (javascript)$ → akhir string
const regex = /world$/;
console.log(regex.test("Hello world")); // trueCode language: JavaScript (javascript)\b → word boundary (batas kata)
Digunakan saat ingin mencocokkan pola pada batas kata.
const regex = /\bcat\b/;
console.log(regex.test("black cat white dog")); // trueCode language: JavaScript (javascript)\B → kebalikan dari \b
const regex = /cat\B/;
console.log(regex.test("category")); // trueCode language: JavaScript (javascript)Grouping () dan Backreference \1
Grouping digunakan untuk:
- Mengelompokkan pola
- Menangkap bagian tertentu (capturing group)
- Membuat backreference (mengacu ke hasil sebelumnya)
Contoh grouping sederhana
const regex = /(ha)+/;
console.log("hahaha".match(regex)); // ["hahaha"]Code language: JavaScript (javascript)Backreference \1
\1 mengacu pada hasil group pertama.
const regex = /(\w+)\s\1/;
console.log(regex.test("hello hello")); // trueCode language: JavaScript (javascript)Cocok untuk mendeteksi teks duplikat.
Alternation |
Fitur ini mirip dengan operator OR, memungkinkan kamu mencocokkan beberapa pola.
Contoh:
const regex = /apple|banana|mango/;
console.log(regex.test("saya makan banana")); // trueCode language: JavaScript (javascript)Contoh dengan grouping:
const regex = /gr(a|e)y/;
console.log(regex.test("gray")); // true
console.log(regex.test("grey")); // trueCode language: JavaScript (javascript)Regex untuk Validasi Input
Regex menjadi sangat berguna dalam proses validasi input, terutama pada aplikasi web yang membutuhkan pengecekan cepat sebelum data dikirim ke server. Validasi input dengan regex di JavaScript memberikan fleksibilitas tinggi, efisiensi, dan dapat mencegah berbagai error maupun data tidak valid sejak dini.
Pada bagian ini, kita akan membahas cara membuat pola regex untuk memvalidasi email, nomor telepon, password, URL, hingga IP address, lengkap dengan contoh implementasinya dalam form validation JavaScript.
Validasi Email
Validasi email adalah salah satu penggunaan regex yang paling umum. Tujuan utama regex email adalah memastikan input memiliki struktur:
username @ domain . extensionRegex yang sering digunakan untuk email:
const emailRegex = /^[\w.-]+@[\w.-]+\.\w{2,}$/;Code language: JavaScript (javascript)Contoh penggunaan:
const email = "user@example.com";
console.log(emailRegex.test(email)); // trueCode language: JavaScript (javascript)Penjelasan pola:
^[\w.-]+→ username (boleh huruf, angka, titik, dash)@→ wajib ada[\w.-]+→ domain\.\w{2,}$→ extension minimal 2 karakter
Validasi Nomor Telepon
Format nomor telepon berbeda-beda, tetapi kita bisa membuat regex dasar yang fleksibel.
Contoh regex nomor telepon umum:
const phoneRegex = /^\+?\d{9,15}$/;Code language: JavaScript (javascript)Maksud:
+?→ opsional\d{9,15}→ panjang 9–15 digit
Contoh penggunaan:
console.log(phoneRegex.test("+628123456789")); // true
console.log(phoneRegex.test("08123456789")); // trueCode language: JavaScript (javascript)Contoh format lebih kompleks (dengan spasi dan dash):
const phoneRegex2 = /^[+\d]?(?:[\d-.\s]{7,15})$/;Code language: JavaScript (javascript)Validasi Password Kuat
Password yang kuat biasanya wajib memenuhi syarat berikut:
- Minimal 8 karakter
- Ada huruf besar
- Ada huruf kecil
- Ada angka
- Ada simbol
Regex password kuat:
const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;Code language: JavaScript (javascript)Contoh:
console.log(strongPasswordRegex.test("ArisDev@2025")); // trueCode language: JavaScript (javascript)Penjelasan:
(?=.*[a-z])→ ada huruf kecil(?=.*[A-Z])→ ada huruf besar(?=.*\d)→ ada angka(?=.*[\W_])→ ada simbol.{8,}→ minimal 8 karakter
Validasi URL dan IP Address
Validasi URL
Regex sederhana untuk URL:
const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/.*)?$/;Code language: JavaScript (javascript)Contoh:
console.log(urlRegex.test("https://arisdev.com")); // trueCode language: JavaScript (javascript)Penjelasan:
optional http:// atau https://domain + extensionoptional path
Validasi IPv4
Format IPv4: 0-255.0-255.0-255.0-255
Regex:
const ipRegex = /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)){3}$/;Code language: JavaScript (javascript)Contoh:
console.log(ipRegex.test("192.168.1.1")); // trueCode language: JavaScript (javascript)Penjelasan:
25[0-5]→ 0-2552[0-4]\d→ 0-2491\d{2}→ 0-199[1-9]?\d→ 0-99
Validasi IPv6
Format IPv6: 0-ffff:0-ffff:0-ffff:0-ffff:0-ffff:0-ffff:0-ffff:0-ffff
Regex:
const ipRegex = /^(?:[A-F0-9]{1,4}:){7}[A-F0-9]{1,4}$/i;Code language: JavaScript (javascript)Contoh: console.log(ipRegex.test(“2001:0db8:85a3:0000:0000:8a2e:0370:7334”)); // true
Penjelasan:
?:[A-F0-9]{1,4}→ 0-ffff{7}→ 7 kali[A-F0-9]{1,4}→ 0-ffffi→ case-insensitive
Contoh Penggunaan Regex di Form Validation JavaScript
Berikut contoh simulasi form sederhana:
HTML (gambaran saja)
<input id="email" type="text">
<input id="password" type="password">
<button onclick="validate()">Submit</button>
<p id="message"></p>Code language: HTML, XML (xml)JavaScript dengan regex:
function validate() {
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const emailRegex = /^[\w.-]+@[\w.-]+\.\w{2,}$/;
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;
if (!emailRegex.test(email)) {
return showMessage("Email tidak valid!");
}
if (!passwordRegex.test(password)) {
return showMessage("Password terlalu lemah!");
}
showMessage("Semua input valid!");
}
function showMessage(msg) {
document.getElementById("message").innerText = msg;
}Code language: JavaScript (javascript)Fitur di atas sangat sering ditemukan pada aplikasi web modern dan bisa dikembangkan menjadi validasi form yang lebih kompleks.
Regex Flags dan Opsi Tambahan
Regex di JavaScript tidak hanya tentang pola, karakter khusus, dan quantifier. Ada juga flags, yaitu opsi tambahan yang dapat mengubah perilaku pencarian pola. Flags ini sangat penting karena memengaruhi cara regex melakukan pencarian dalam string, menangani huruf besar-kecil, baris baru, karakter Unicode, dan lain-lain.
Dalam praktiknya, flags membantu membuat regex menjadi lebih fleksibel dan dapat digunakan pada berbagai kasus kompleks.
Global Flag: g
Flag g digunakan untuk mencari semua kecocokan (global match), bukan hanya kecocokan pertama.
Contoh tanpa g:
const text = "apple banana apple mango";
console.log(text.match(/apple/));
// output: ["apple"]Code language: JavaScript (javascript)Hanya menemukan kecocokan pertama.
Contoh dengan g:
console.log(text.match(/apple/g));
// output: ["apple", "apple"]Code language: JavaScript (javascript)Kapan menggunakan g?
- Mencari semua angka di teks
- Menghitung jumlah kemunculan kata
- Parsing data dengan pola berulang
Case-Insensitive Flag: i
Flag i membuat pencarian tidak membedakan huruf besar dan kecil.
Contoh:
const regex = /hello/i;
console.log(regex.test("Hello")); // true
console.log(regex.test("HELLO")); // true
console.log(regex.test("hElLo")); // trueCode language: JavaScript (javascript)Kapan digunakan?
- Validasi email (huruf besar kecil tidak penting)
- Mencari kata tertentu dalam paragraf
- Mencocokkan username atau nama pengguna
Multiline Flag: m
Secara default, ^ dan $ hanya berfungsi di awal dan akhir seluruh string.
Dengan flag m, keduanya berlaku di setiap baris (multi-line mode).
Tanpa m:
const text = "Hello\nWorld";
console.log(text.match(/^World/));
// null (karena bukan awal string)Code language: JavaScript (javascript)Dengan m:
console.log(text.match(/^World/m));
// ["World"]Code language: JavaScript (javascript)Kapan dipakai?
- Membaca file log
- Memproses teks yang memiliki banyak baris
- Mencocokkan pola pada setiap baris input
Sticky Flag: y
Flag y mencocokkan regex mulai dari posisi terakhir (lastIndex), bukan mencari ke seluruh string. Ini lebih ketat dibanding flag g.
Contoh:
const regex = /a/y;
const text = "aaba";
regex.lastIndex = 1;
console.log(regex.test(text)); // false (karena text[1] = a? Tidak—text[1] = a, tapi posisi ketat)Code language: JavaScript (javascript)Flag y digunakan untuk parsing ketat, misalnya saat membaca token satu per satu.
Unicode Flag: u
Regex tanpa flag u kadang gagal saat mencocokkan karakter Unicode seperti emoji, huruf Mandarin, atau bahasa lain.
Misal:
console.log(/💖/.test("💖")); // false di beberapa kasus tanpa uCode language: JavaScript (javascript)Dengan u:
console.log(/💖/u.test("💖")); // trueCode language: JavaScript (javascript)Flag u sangat penting dalam aplikasi internasional.
Kombinasi Flags untuk Kasus Kompleks
Flags dapat dikombinasikan sesuai kebutuhan.
Contoh kombinasi umum:
gi — global + case-insensitive
const regex = /apple/gi;
const text = "Apple apple aPPle";
console.log(text.match(regex));
// ["Apple", "apple", "aPPle"]Code language: JavaScript (javascript)gm — global + multiline
const text = `
user1
user2
user3
`;
console.log(text.match(/^user\d$/gm));
// ["user1", "user2", "user3"]Code language: JavaScript (javascript)gim — lengkap
Global, case-insensitive, multiline.
const regex = /^hello/ gim;Code language: JavaScript (javascript)Contoh kasus nyata, misalnya kamu ingin mencari seluruh kata “error” (tanpa peduli huruf besar kecil) pada setiap baris log:
const logRegex = /^error/ gim;Code language: JavaScript (javascript)Regex tersebut akan:
- Mencari di seluruh file .log (flag g)
- Tidak peduli ERROR, Error, error (flag i)
- Berlaku untuk setiap baris log (flag m)
Ringkasan Flags Regex
| Flag | Deskripsi | Kapan Dipakai |
|---|---|---|
g | global match | mencari semua kecocokan |
i | case-insensitive | pencarian tanpa peduli kapital |
m | multiline | ^ dan $ berlaku di setiap baris |
y | sticky match | parsing ketat berbasis posisi |
u | unicode support | emoji, huruf non-latin |
Escape Character dan Special Character
Pada bagian ini kita akan membahas escape character dan special character yang menjadi fondasi penting dalam regular expression JavaScript. Banyak pemula yang kesulitan memahami bagian ini karena karakter-karakter tersebut memiliki fungsi khusus dan tidak bisa digunakan sembarangan. Dengan memahami daftar simbol penting ini, kamu akan semakin mahir membuat pattern regex yang kuat, fleksibel, dan tepat sasaran.
Escape Sequence Penting: \d, \w, \s, \D, \W, \S
Escape sequence digunakan untuk mewakili kelompok karakter tertentu tanpa menuliskannya satu per satu. Inilah yang membuat regex sangat efisien.
1. \d → digit (0–9)
Mencocokkan angka dari 0 hingga 9.
let regex = /\d+/;
console.log("Hai123".match(regex)); // ["123"]Code language: JavaScript (javascript)2. \D → selain digit
Kebalikan dari \d.
let regex = /\D+/;
console.log("JS123".match(regex)); // ["JS"]Code language: JavaScript (javascript)3. \w → word character (A–Z, a–z, 0–9, _)
Umumnya dipakai untuk validasi username, identifier, dan teks umum.
let regex = /\w+/;
console.log("user_01".match(regex)); // ["user_01"]Code language: JavaScript (javascript)4. \W → selain word character
Kebalikan dari \w.
let regex = /\W+/;
console.log("Hello@2025".match(regex)); // ["@"]Code language: JavaScript (javascript)5. \s → whitespace (spasi, tab, newline, dll.)
let regex = /\s/;
console.log("Hello World".match(regex)); // [" "]Code language: JavaScript (javascript)6. \S → selain whitespace
let regex = /\S+/;
console.log("Hi There".match(regex)); // ["Hi"]Code language: JavaScript (javascript)Escape sequence ini sangat sering digunakan dalam validasi input seperti email, password, nama, dan format teks lainnya.
Literal Escape: \\, \.
Beberapa karakter memiliki fungsi khusus dalam regex, sehingga jika kamu ingin menggunakannya sebagai karakter biasa (literal), kamu harus men-escape karakter tersebut.
1. \\ → mencocokkan backslash literal
Regex untuk mencari backslash harus ditulis \
let regex = /\\/;
console.log("\\folder".match(regex)); // ["\"]Code language: JavaScript (javascript)2. \. → mencocokkan titik literal “.”
Karakter “.” dalam regex berarti “mencocokkan karakter apa saja”, jadi perlu di-escape jika ingin mencari titik sebenarnya.
let regex = /\./;
console.log("v1.2.3".match(regex)); // ["."]Code language: JavaScript (javascript)Karakter Khusus Regex: . ^ $ * + ? ( ) [ ] { } |
Ini adalah karakter-karakter “sakral” dalam regex. Masing-masing memiliki fungsi unik:
| Karakter | Fungsi | |
|---|---|---|
. | mencocokkan semua karakter kecuali newline | |
^ | anchor: awal string | |
$ | anchor: akhir string | |
* | quantifier: 0 atau lebih | |
+ | quantifier: 1 atau lebih | |
? | quantifier opsional / lazy quantifier | |
() | grouping & capturing | |
[] | character class | |
{} | quantifier jumlah | |
| ` | ` | OR / alternation |
Contoh penggunaan beragam karakter khusus
1. Kleene star * dan plus +
console.log("aaa".match(/a*/)); // ["aaa"]
console.log("aaa".match(/a+/)); // ["aaa"]Code language: JavaScript (javascript)2. Grouping ()
let regex = /(ha)+/;
console.log("hahaha".match(regex)); // ["hahaha"]Code language: JavaScript (javascript)3. Alternation |
let regex = /kucing|anjing/;
console.log("Saya punya kucing".match(regex)); // ["kucing"]Code language: JavaScript (javascript)4. Character class []
let regex = /[aeiou]/;
console.log("halo".match(regex)); // ["a"]Code language: JavaScript (javascript)5. Anchors ^ dan $
let regex = /^Hello/;
console.log("Hello World".match(regex)); // ["Hello"]Code language: JavaScript (javascript)Mengapa harus tahu karakter khusus?
Karena salah satu kesalahan terbesar pemula dalam regex adalah:
- Menggunakan karakter khusus tanpa tahu fungsinya.
- Mencari karakter literal tanpa di-escape.
- Dengan memahami daftar ini, kamu bisa membuat regex jauh lebih akurat dan efisien.
Kesimpulan
Setelah mempelajari semua bagian dari tutorial lengkap ini, kamu kini telah memahami fondasi kuat tentang bagaimana regular expression JavaScript bekerja, bagaimana cara menulis pattern yang benar, hingga bagaimana melakukan pattern matching untuk kebutuhan validasi maupun manipulasi string.
Kita telah membahas cara membuat regex menggunakan literal dan constructor, memahami karakter dasar hingga meta character, menggunakan escape sequence, serta mengeksplorasi flags seperti g, i, dan m yang sangat penting untuk mengontrol perilaku pencarian. Kamu juga telah belajar berbagai metode bawaan JavaScript seperti test(), match(), replace(), search(), dan split() yang memungkinkan regex digunakan secara praktis dalam skenario nyata.
Tidak berhenti sampai di situ, kamu juga sudah mempelajari pattern matching lanjutan seperti character class, quantifier, anchors, grouping, backreference, hingga alternation |. Untuk penerapan nyata, kamu telah mempelajari cara membuat regex untuk validasi — seperti email, nomor telepon, password, URL, hingga IP address. Semua ini merupakan fondasi penting yang membuatmu siap membangun berbagai fitur berbasis teks yang lebih fleksibel dan canggih.
Dengan memahami seluruh materi dari artikel ini, kamu sudah memiliki dasar kuat untuk menggunakan regex dalam berbagai kebutuhan pengembangan web modern. Teruslah berlatih, eksplorasi pola-pola baru, dan kombinasikan regex dengan JavaScript untuk membangun aplikasi yang lebih cepat, aman, dan elegan.
