Anchors — Regex

Apa itu Anchor? Anchor tidak mencocokkan karakter tertentu — mereka mencocokkan posisi di dalam string. Anchor memastikan pattern kamu ditemukan di lokasi…

Apa itu Anchor?

Anchor tidak mencocokkan karakter tertentu — mereka mencocokkan posisi di dalam string. Anchor memastikan pattern kamu ditemukan di lokasi yang tepat.

^ — Awal String

Caret ^ (di luar character class) memastikan pattern ada di awal string:

/^Halo/.test("Halo dunia");  // true
/^Halo/.test("Dia bilang Halo"); // false

// Berguna untuk validasi
/^[A-Z]/.test("Budi");   // true (dimulai huruf besar)
/^[A-Z]/.test("budi");   // false

$ — Akhir String

Dollar $ memastikan pattern ada di akhir string:

/dunia$/.test("Halo dunia");  // true
/dunia$/.test("dunia ini");   // false

// Cek ekstensi file
/\.js$/.test("app.js");     // true
/\.js$/.test("app.js.bak"); // false

Kombinasi ^ dan $ — Full Match

Menggunakan keduanya memastikan seluruh string cocok dengan pattern (bukan hanya sebagian):

// Tanpa anchor — cocok di mana saja
/\d+/.test("abc123def");  // true

// Dengan kedua anchor — seluruh string harus cocok
/^\d+$/.test("abc123def"); // false
/^\d+$/.test("123456");    // true

// Validasi input form
const isValidAge = /^\d{1,3}$/.test("25");   // true
const isInvalid = /^\d{1,3}$/.test("25 tahun"); // false

\b — Word Boundary

Word boundary \b cocok di posisi antara word character (\w) dan non-word character (atau awal/akhir string):

// Tanpa boundary — "cat" ditemukan di "concatenate"
/cat/.test("concatenate");  // true 😬

// Dengan boundary — hanya kata "cat" yang berdiri sendiri
/\bcat\b/.test("concatenate");  // false ✓
/\bcat\b/.test("the cat sat");  // true ✓
/\bcat\b/.test("cat");          // true ✓

// Awal kata saja
/\bpro/.test("programming"); // true
/\bpro/.test("improve");     // false ("pro" bukan di awal kata)

\B — Non-Word Boundary

Kebalikan dari \b — cocok di posisi yang bukan word boundary:

/\Bcat/.test("concatenate"); // true (cat di tengah kata)
/\Bcat/.test("cat");         // false (cat di awal kata = boundary)

Multiline Mode (m flag)

Dengan flag m, ^ dan $ cocok di awal/akhir setiap baris (bukan hanya awal/akhir seluruh string):

const multiline = `baris pertama
baris kedua
baris ketiga`;

// Tanpa flag m — hanya baris pertama
multiline.match(/^baris/);   // ["baris"] (di "baris pertama")

// Dengan flag m — setiap baris
multiline.match(/^baris/gm); // ["baris", "baris", "baris"]

// Temukan kata terakhir di setiap baris
multiline.match(/\w+$/gm);  // ["pertama", "kedua", "ketiga"]

Contoh Praktis

// Validasi username: huruf/angka/underscore, 3-16 karakter
const usernameValid = /^[a-zA-Z0-9_]{3,16}$/.test("dev_user42");
console.log(usernameValid); // true

// Cari seluruh kata "di" (bukan bagian dari kata lain)
const teks = "Dia pergi di malam hari menuju kediaman raja";
console.log(teks.match(/\bdi\b/gi)); // ["di"]

// Cek apakah baris dimulai dengan komentar
const code = `const x = 1;
// ini komentar
const y = 2;`;
console.log(code.match(/^\/\/.+/gm)); // ["// ini komentar"]

🎭 Analogi sehari-hari: Anchor = tanda check di formulir. ^ = "tanda awal halaman" (cuma valid di awal). $ = "tanda akhir halaman" (cuma valid di akhir). \b = "spasi antar kata" (transisi). Anchor gak konsumsi karakter — cuma cek posisi. Bayangin tukang pos: bukan periksa isi surat, tapi cek alamat tujuan ada di stempel awal/akhir.

💡 ^ punya 2 makna berbeda:

Sama simbol, beda context. Sumber bug pemula. Cara hafal: kalau di luar [] = posisi, di dalam = negasi.

⚠️ Jebakan klasik:

🎯 Pattern dengan anchor:

TL;DR: Anchor = match posisi, bukan karakter. ^ start, $ end, \b word boundary. Wajib untuk validasi penuh (^...$). Multiline mode (m flag) ubah meaning ^ & $ jadi per-line. \b cegah match dalam kata lain.