Regular Expressions — JavaScript

Bayangin kamu jadi tukang pos yang harus filter ribuan amplop: "ambil yang alamatnya Jakarta, yang ada kode pos 5 angka, yang nama penerima diawali huruf B." Ri

Bayangin kamu jadi tukang pos yang harus filter ribuan amplop: "ambil yang alamatnya Jakarta, yang ada kode pos 5 angka, yang nama penerima diawali huruf B." Ribet ngecek satu-satu. Solusinya: bikin "pola filter" yang otomatis ngenalin amplop yang cocok. Itu inti dari Regular Expression (regex) — bahasa khusus buat ngenalin pola di teks. Validasi email? Regex. Cari hashtag di tweet? Regex. Ekstrak nomor telepon dari paragraf? Regex.

🤔 Reputasi gelap. Programmer punya quote terkenal: "Some people, when confronted with a problem, think 'I know, I'll use regular expressions.' Now they have two problems." Regex powerful banget, tapi syntax-nya cryptic — gampang nulis, susah baca lagi 6 bulan kemudian. Pakai sparingly, kasih komentar penjelas.

Membuat regex:

const pola = /halo/;          // literal
const pola2 = new RegExp("halo"); // constructor

Method yang sering digunakan:

// test() — cek apakah cocok (true/false)
const pola = /kucing/;
console.log(pola.test("saya punya kucing")); // true
console.log(pola.test("saya punya anjing")); // false

// match() — ambil hasil yang cocok
const teks = "ada 3 kucing dan 12 anjing";
const angka = teks.match(/\d+/g);
console.log(angka); // ["3", "12"]

// replace() — ganti yang cocok
const hasil = "Halo Dunia".replace(/Dunia/, "JavaScript");
console.log(hasil); // "Halo JavaScript"

Flag yang umum:

Contoh validasi email sederhana:

function adalahEmail(teks) {
  return /\S+@\S+\.\S+/.test(teks);
}

console.log(adalahEmail("[email protected]")); // true
console.log(adalahEmail("bukan-email"));   // false

🎭 Analogi sehari-hari

Regex = saringan kopi dengan pola lubang khusus. Tuang teks ke saringan, hanya yang cocok pola yang lewat. Pola sederhana = saringan biasa. Pola kompleks (anchor, group, lookahead) = saringan presisi laboratorium.

⚠️ Jebakan yang sering ditemui

1. Greedy by default — ambil sebanyak mungkin.

"<b>halo</b>".match(/<.*>/);    // ["<b>halo</b>"] — kebanyakan!
"<b>halo</b>".match(/<.*?>/);   // ["<b>"]         — lazy dengan `?`

2. Lupa flag g = replace cuma ganti pertama.

"a-a-a".replace(/a/, "X");      // "X-a-a"
"a-a-a".replace(/a/g, "X");     // "X-X-X"

3. Karakter spesial harus di-escape: . * + ? ( ) [ ] { } | ^ $ \.

"3.14".match(/3.14/);     // cocok dengan "3X14" juga (titik = wildcard)
"3.14".match(/3\.14/);    // cocok cuma "3.14"

4. RegExp dengan flag g punya state — pakai pola baru atau reset.

const r = /a/g;
r.test("aa");   // true (lastIndex = 1)
r.test("aa");   // true (lastIndex = 2)
r.test("aa");   // false! (lastIndex = 2, tidak ada lagi)

5. JANGAN pakai regex untuk parsing HTML/email lengkap — gunakan parser proper.

🎯 Regex vs string method — pilih yang mana?

  • Cek match sederhana ("apakah string mengandung kata X") → string.includes(x) (gak butuh regex)
  • Pisah string by separator tetap → string.split(",") (gak butuh regex)
  • Replace fixed text → string.replaceAll("a", "b") (gak butuh regex)
  • Pattern fleksibel (case-insensitive, optional chars, alternasi) → regex
  • Capture group (extract tahun + bulan dari date) → regex
  • Validasi format (email, nomor telepon, URL) → regex (atau library spesifik)

Aturan emas: regex itu mahal mental cost. Pakai cuma kalau butuh fleksibilitas yang string method gak bisa. if (text.includes("@") && text.includes(".")) lebih maintain-able dari regex email yang rumit. Kompleksitas regex = pelajari + dokumentasikan + comment.

TL;DR: Regex = bahasa khusus untuk pola di teks. Method utama: test() (boolean), match() (ambil hasil), replace() (ganti). Flag penting: g (semua), i (case-insensitive). Greedy default — pakai ? untuk lazy. Karakter spesial wajib escape (\., \*). Mahal mental cost — pakai cuma kalau string method (includes/split/replaceAll) gak cukup. JANGAN parse HTML/email kompleks pakai regex, pakai parser proper.

Yang akan kamu pelajari