Regex JavaScript: test, match, replace, dan Capture Group

Regex adalah pola untuk mencocokkan teks

Regular expression menggambarkan bentuk string: "empat digit," "sebuah kata yang diikuti koma," "apa pun yang terlihat seperti email." JavaScript memberimu dua cara untuk membuatnya:

const literal = /hello/i;
const built = new RegExp("hello", "i");

console.log(literal.test("Hello, world"));
console.log(built.test("HELLO"));

Bentuk literal, yaitu garis miring di sekitar pola dengan flag setelah garis miring penutup, adalah yang paling sering kamu pakai. Pakai new RegExp(...) saat polanya sendiri dinamis, misalnya disusun dari input pengguna atau sebuah variabel.

Huruf i di ujung adalah flag. i berarti tidak membedakan huruf besar dan kecil. Penjelasan tentang flag sebentar lagi.

test: apakah cocok?

Pertanyaan tercepat yang bisa kamu ajukan ke regex adalah "apakah string ini mengandung kecocokan?" Itulah test:

const hasDigit = /\d/;

console.log(hasDigit.test("abc123"));
console.log(hasDigit.test("abcdef"));
console.log(hasDigit.test(""));

\d berarti "digit apa saja." test mengembalikan true atau false dan tidak lebih. Kalau yang kamu butuhkan hanya jawaban ya atau tidak, misalnya memvalidasi field atau memfilter array, test adalah alat yang tepat.

match: mengambil teks yang cocok

Saat kamu menginginkan teks yang cocok itu sendiri, pakai method match milik string:

const text = "Order #4521 shipped on 2024-11-03";

console.log(text.match(/\d+/));
console.log(text.match(/\d+/g));

Tanpa flag g, match mengembalikan array berisi kecocokan pertama beserta metadata (index, input). Dengan g, ia mengembalikan setiap kecocokan sebagai array string biasa. Kalau tidak ada yang cocok, kamu mendapat null, bukan array kosong, jadi lindungi kodemu:

const result = "no numbers here".match(/\d+/);
console.log(result ?? "no match");

Flag mengubah perilaku pola

Flag ditulis setelah garis miring penutup dan mengubah cara pencocokan bekerja. Yang paling sering kamu pakai:

• g: global, temukan setiap kecocokan, bukan hanya yang pertama.
• i: tidak membedakan huruf besar dan kecil.
• m: multiline, sehingga ^ dan $ cocok dengan awal/akhir baris, bukan hanya awal/akhir string.
• s: dotall, sehingga . juga cocok dengan baris baru.
• u: sadar unicode, dibutuhkan untuk banyak pola emoji dan non-ASCII.

const poem = "Roses are red\nViolets are blue";

console.log(poem.match(/^\w+/));
console.log(poem.match(/^\w+/gm));

Tanpa m, ^ hanya menambat ke awal string yang paling depan. Dengan m, ia menambat ke awal setiap baris, jadi Roses dan Violets sama-sama tertangkap.

Character class dan quantifier

Balok bangunan sebagian besar pola:

• \d digit, \w karakter kata (huruf/digit/garis bawah), \s whitespace.
• [abc] salah satu dari a, b, atau c. [^abc] apa pun kecuali itu. [a-z] sebuah rentang.
• . karakter apa pun kecuali baris baru.
• * nol atau lebih, + satu atau lebih, ? nol atau satu.
• {3} tepat tiga, {2,5} antara dua dan lima, {2,} dua atau lebih.
• ^ awal, $ akhir.

Kalau digabungkan:

const patterns = {
  phone: /^\d{3}-\d{3}-\d{4}$/,
  hex: /^#[0-9a-f]{6}$/i,
  word: /\b\w+\b/g,
};

console.log(patterns.phone.test("415-555-0132"));
console.log(patterns.hex.test("#1a2B3c"));
console.log("hello, regex world".match(patterns.word));

\b adalah word boundary, yaitu garis tak terlihat antara karakter kata dan karakter bukan kata. Berguna saat kamu ingin mencocokkan "kata utuh". Untuk melihat apa yang dicocokkan sebuah pola sebelum kamu memakainya di kode, coba di regex tester.

Capture group: mengingat bagian dari kecocokan

Tanda kurung membuat group yang menangkap apa pun yang dicocokkannya. exec dan match mengembalikan hasil tangkapan itu bersama kecocokan keseluruhan:

const date = /(\d{4})-(\d{2})-(\d{2})/;
const result = "today is 2024-11-03".match(date);

console.log(result[0]);
console.log(result[1]);
console.log(result[2]);
console.log(result[3]);

Indeks 0 adalah kecocokan penuh, dan setiap group mendapat slotnya sendiri sesudahnya. Menghitung group berdasarkan posisi jadi merepotkan begitu jumlahnya lebih dari dua, jadi beri nama:

const date = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const { groups } = "today is 2024-11-03".match(date);

console.log(groups.year, groups.month, groups.day);

Group bernama lebih mudah dibaca di tempat pemakaiannya dan tetap aman walaupun urutan polanya diubah.

replace: menulis ulang teks yang cocok

replace menerima pola dan pengganti. Penggantinya bisa berupa string atau fungsi:

const text = "Contact: alice@example.com or bob@example.com";

console.log(text.replace(/@example\.com/, "@acme.io"));
console.log(text.replace(/@example\.com/g, "@acme.io"));

Tanpa g, hanya kecocokan pertama yang diganti. Kesalahan yang umum adalah lupa flag-nya lalu bingung kenapa email kedua masih terlihat salah.

String pengganti mendukung back-reference. $1, $2, dan seterusnya merujuk ke capture group; $<name> merujuk ke group bernama:

const date = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

console.log("2024-11-03".replace(date, "$<day>/$<month>/$<year>"));

Untuk apa pun yang lebih dari sekadar substitusi langsung, kirim sebuah fungsi. Fungsi itu menerima kecocokan dan hasil tangkapan sebagai argumen:

const prices = "Apples $3, Pears $5, Plums $2";

const doubled = prices.replace(/\$(\d+)/g, (_, n) => `$${Number(n) * 2}`);
console.log(doubled);

Garis bawah adalah kecocokan penuh (yang tidak kita butuhkan); n adalah capture group pertama. Pola ini, regex ditambah fungsi pengganti, menangani sebagian besar pengolahan teks di dunia nyata.

matchAll: setiap kecocokan beserta group-nya

String.prototype.matchAll mengembalikan iterator berisi setiap kecocokan beserta capture group-nya, sesuatu yang tidak bisa dilakukan match biasa dengan flag g:

const text = "alice@acme.io and bob@example.com";
const email = /(?<user>\w+)@(?<domain>[\w.]+)/g;

for (const m of text.matchAll(email)) {
  console.log(m.groups.user, "at", m.groups.domain);
}

matchAll wajib memakai flag g. Tanpanya, kamu akan mendapat TypeError. Spread hasilnya ke array ([...text.matchAll(email)]) kalau kamu butuh akses acak, bukan perulangan.

Escape karakter khusus

Karakter seperti . * + ? ( ) [ ] { } | \ ^ $ punya arti khusus di regex. Untuk mencocokkannya secara harfiah, escape dengan backslash:

const withDot = /example\.com/;
const withoutDot = /example.com/;

console.log(withDot.test("example.com"));
console.log(withDot.test("examplexcom"));
console.log(withoutDot.test("examplexcom"));

Versi yang tidak di-escape cocok dengan examplexcom karena . berarti "karakter apa pun." Bug semacam ini umum, dan tidak terlihat. Kalau sebuah regex mencocokkan terlalu banyak, cari dulu . yang tidak di-escape.

Saat menyusun pola dari input pengguna, kamu wajib meng-escape-nya, atau pengguna bisa menyisipkan sintaks regex:

function escape(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

const userInput = "3.14";
const safe = new RegExp(escape(userInput));
console.log(safe.test("pi is 3.14"));
console.log(safe.test("pi is 3x14"));

$& dalam string pengganti adalah singkatan dari "seluruh kecocokan."

Lookahead dan lookbehind

Kadang kamu ingin mencocokkan teks hanya kalau ia diikuti (atau didahului) sesuatu, tanpa memasukkan sesuatu itu ke dalam kecocokan. Itulah fungsi lookaround:

const prices = "items cost 10 USD, 25 EUR, 7 GBP";

console.log(prices.match(/\d+(?= USD)/));
console.log(prices.match(/(?<=\$)\d+/));

• (?= ...) lookahead positif: "diikuti oleh."
• (?<= ...) lookbehind positif: "didahului oleh."
• (?! ...) dan (?<! ...) adalah versi negatifnya.

Lookaround tidak memakan karakter, jadi bagian yang sedang "dilihat" tetap tersedia untuk bagian pola berikutnya.

Sedikit soal validasi email

Kamu akan sering menemui permintaan ini: "berikan regex untuk memvalidasi email." Jawaban jujurnya: jangan. Tata bahasa email yang sebenarnya rumit, dan regex apa pun yang cukup pendek untuk dibaca pasti salah ke salah satu arah. Untuk validasi form, pola yang pragmatis sudah cukup:

const emailish = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

console.log(emailish.test("alice@acme.io"));
console.log(emailish.test("not an email"));
console.log(emailish.test("a@b"));

Bacalah seperti ini: "beberapa karakter yang bukan whitespace dan bukan @, sebuah @, lalu karakter sejenis lagi, sebuah titik, lalu karakter sejenis lagi." Pola itu menangkap salah ketik yang jelas tanpa berpura-pura menegakkan RFC 5322. Untuk verifikasi sungguhan, kirim email konfirmasi.

Kesalahan umum

Beberapa jebakan yang perlu kamu pahami betul:

• Lupa g pada replace atau matchAll. Hanya kecocokan pertama, atau TypeError.
• lastIndex yang menyimpan state pada regex global. Regex dengan flag g atau y mengingat di mana ia terakhir berhenti di antara pemanggilan test/exec. Jangan memakai ulang satu regex untuk string-string yang tidak berhubungan; buat yang baru, atau pakai matchAll.
• Titik dan garis miring yang tidak di-escape pada pola dinamis. Selalu escape input pengguna sebelum memasukkannya ke new RegExp(...).
• Catastrophic backtracking. Quantifier bersarang seperti (a+)+ pada input yang ekstrem bisa membekukan tab. Kalau sebuah regex terasa lambat, sederhanakan.

Berikutnya: tanggal dan waktu

Regex menangani bentuk teks; data nyata juga datang dengan timestamp yang perlu di-parse, diformat, dan dihitung. Halaman berikutnya membahas Date, Intl.DateTimeFormat, dan cara berpikir yang menjauhkan bug zona waktu.