Groups & Capturing — Regex

Apa itu Group? Group di regex menggunakan tanda kurung () untuk mengelompokkan beberapa elemen menjadi satu unit. Group punya dua fungsi utama: menerapkan quant

Apa itu Group?

Group di regex menggunakan tanda kurung () untuk mengelompokkan beberapa elemen menjadi satu unit. Group punya dua fungsi utama: menerapkan quantifier ke beberapa karakter sekaligus, dan menangkap (capture) bagian dari kecocokan.

Grouping untuk Quantifier

// Tanpa group — quantifier hanya berlaku untuk "a"
/ha+/.test("haaa");    // true ("h" diikuti banyak "a")
/ha+/.test("hahaha");  // true (cocok "ha" pertama)

// Dengan group — quantifier berlaku untuk seluruh "ha"
/(ha)+/.test("hahaha"); // true (pengulangan "ha")
"hahaha".match(/(ha)+/); // ["hahaha", "ha"]

Capturing Groups

Setiap group dengan () secara otomatis menangkap teks yang cocok. Hasil tangkapan bisa diakses dari hasil .match() atau .exec():

const tanggal = "2024-03-15";
const match = tanggal.match(/(\d{4})-(\d{2})-(\d{2})/);

console.log(match[0]); // "2024-03-15" (seluruh kecocokan)
console.log(match[1]); // "2024" (group 1: tahun)
console.log(match[2]); // "03"   (group 2: bulan)
console.log(match[3]); // "15"   (group 3: hari)

Group dinomori berdasarkan urutan tanda kurung buka ( dari kiri ke kanan.

Named Capturing Groups

Untuk kode yang lebih readable, gunakan named groups dengan syntax (?<nama>...):

const tanggal = "2024-03-15";
const match = tanggal.match(/(?<tahun>\d{4})-(?<bulan>\d{2})-(?<hari>\d{2})/);

console.log(match.groups.tahun); // "2024"
console.log(match.groups.bulan); // "03"
console.log(match.groups.hari);  // "15"

Non-Capturing Groups

Jika kamu butuh group hanya untuk menerapkan quantifier (tanpa perlu menangkap), gunakan (?:...):

// Capturing group — menangkap "http" atau "https"
"https://web.dev".match(/(https?):/)
// ["https:", "https"]

// Non-capturing — tidak menangkap, hanya untuk grouping
"https://web.dev".match(/(?:https?):\/\/(.+)/)
// ["https://web.dev", "web.dev"]

Non-capturing group berguna untuk menjaga hasil .match() tetap bersih.

Backreference

Kamu bisa merujuk kembali ke group yang sudah ditangkap menggunakan \1, \2, dll:

// Cari kata yang diulang
const duplikat = /\b(\w+)\s+\1\b/;
duplikat.test("saya saya");    // true (kata diulang!)
duplikat.test("saya kamu");    // false

// Cari tag HTML yang cocok (buka dan tutup)
const htmlTag = /<(\w+)>.*?<\/\1>/;
htmlTag.test("<b>tebal</b>");  // true
htmlTag.test("<b>tebal</i>");  // false (tag tidak cocok)

Destructuring dengan Groups

// Extract komponen URL
const url = "https://belajarweb.dev:8080/lessons";
const [, protocol, host, port, path] =
  url.match(/(\w+):\/\/([^:]+):(\d+)(\/.*)/) || [];

console.log(protocol); // "https"
console.log(host);     // "belajarweb.dev"
console.log(port);     // "8080"
console.log(path);     // "/lessons"

Contoh Praktis

// Parse log entry
const log = "[2024-03-15 10:30:45] ERROR: Database connection failed";
const parsed = log.match(/\[(.+?)\] (\w+): (.+)/);
console.log(parsed[1]); // "2024-03-15 10:30:45"
console.log(parsed[2]); // "ERROR"
console.log(parsed[3]); // "Database connection failed"

// Swap nama depan dan belakang
const nama = "Budi Santoso";
const swapped = nama.replace(/(\w+) (\w+)/, "$2, $1");
console.log(swapped); // "Santoso, Budi"

🎭 Analogi sehari-hari: Group () = bagian terberi label di formulir. "Tahun: ___ Bulan: ___ Hari: ___". Setiap blank = satu group. Setelah diisi, kamu bisa rujuk balik: "data di kotak Tahun" = group 1. Named group = label eksplisit (lebih readable). Backreference = "isi yang sama dengan kotak 1".

💡 Kapan pakai mana:

Capturing (...) = butuh tangkap nilai untuk dipakai (extract, replace)
Non-capturing (?:...) = cuma butuh group untuk quantifier, hasil match bersih
Named (?<name>...) = code lebih readable, akses via match.groups.name
Backreference \1 = match teks yang sama dengan group sebelumnya (deteksi duplikasi)

⚠️ Jebakan klasik:

Group banyak tapi gak butuh tangkap = pakai non-capturing (?:...) untuk performa + clarity
Lupa indeks group — group 0 = full match, group 1 = first captured. Bukan dari 0
Backreference cross-line — pastikan flag yang tepat
Greedy capture — (.+) ambil semua. Pakai lazy (.+?) atau character class [^x]+
Replace dengan $1 — di JS pakai $1, di Perl \1. Beda dialect

🎯 Pattern umum:

Parse date: (\d{4})-(\d{2})-(\d{2}) → groups
Detect duplicate word: \b(\w+)\b\s+\1\b
Match HTML tag pair: <(\w+)>.*?</\1>
Swap fields: replace (\w+),(\w+) with $2,$1
Extract URL parts: (\w+)://([^/]+)(/.*) (protocol, host, path)

TL;DR: Group () untuk apply quantifier ke seksi atau capture untuk extract/replace. (?:...) non-capturing kalau gak butuh tangkap. Named group (?<name>...) untuk readability. Backreference \1 untuk match teks yang sama. Capture indeks mulai dari 1.