Replace & Transform — Regex

String.prototype.replace() Method replace() adalah salah satu penggunaan regex yang paling powerful di JavaScript. Dengan flag g, kamu bisa mengganti semua…

String.prototype.replace()

Method replace() adalah salah satu penggunaan regex yang paling powerful di JavaScript. Dengan flag g, kamu bisa mengganti semua kecocokan sekaligus.

Penggantian Dasar

// Tanpa regex — hanya ganti kemunculan pertama
"kucing kucing kucing".replace("kucing", "anjing");
// "anjing kucing kucing"

// Dengan regex + flag g — ganti semua
"kucing kucing kucing".replace(/kucing/g, "anjing");
// "anjing anjing anjing"

Backreference di Replacement

Gunakan $1, $2, dll untuk merujuk ke capturing groups:

// Ubah format tanggal: DD/MM/YYYY → YYYY-MM-DD
"15/03/2024".replace(/(\d{2})\/(\d{2})\/(\d{4})/, "$3-$2-$1");
// "2024-03-15"

// Swap nama
"Budi Santoso".replace(/(\w+) (\w+)/, "$2, $1");
// "Santoso, Budi"

// Named backreference
"15/03/2024".replace(
  /(?<hari>\d{2})\/(?<bulan>\d{2})\/(?<tahun>\d{4})/,
  "
lt;tahun>-
lt;bulan>-
lt;hari>"
);
// "2024-03-15"

Special Replacement Patterns

Pattern Arti
amp;		 Seluruh kecocokan
Replace & Transform — Regex — Hyper Sheets Teks sebelum kecocokan
Teks setelah kecocokan
$1..$9 Capturing group ke-n
$ Karakter $ literal 
// Bungkus semua angka dengan tag <strong>
"Ada 3 kucing dan 12 ikan".replace(/\d+/g, "<strong>
amp;</strong>");
// "Ada <strong>3</strong> kucing dan <strong>12</strong> ikan"

Callback Function

Untuk transformasi yang lebih kompleks, gunakan function sebagai parameter kedua:

// Ubah semua huruf pertama kata menjadi kapital
"halo dunia javascript".replace(/\b\w/g, (char) => char.toUpperCase());
// "Halo Dunia Javascript"

// Kalkulator sederhana di dalam string
"Harga: 100*2 dan 50+30".replace(/\d+[*+]\d+/g, (expr) => {
  return Function(`return ${expr}`)();
});
// "Harga: 200 dan 80"

Callback menerima parameter:

"2024-03-15".replace(
  /(\d{4})-(\d{2})-(\d{2})/,
  (fullMatch, tahun, bulan, hari, offset, originalString) => {
    return `${hari} ${["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Ags","Sep","Okt","Nov","Des"][Number(bulan)-1]} ${tahun}`;
  }
);
// "15 Mar 2024"

replaceAll()

ES2021 menambahkan replaceAll() yang tidak memerlukan flag g:

"a.b.c".replaceAll(".", "-");  // "a-b-c"

// Tapi dengan regex, tetap butuh flag g
"a.b.c".replaceAll(/\./g, "-"); // "a-b-c"

Transformasi Teks Umum

camelCase ↔ kebab-case

// camelCase → kebab-case
function toKebab(str) {
  return str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
}
console.log(toKebab("backgroundColor")); // "background-color"

// kebab-case → camelCase
function toCamel(str) {
  return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
}
console.log(toCamel("background-color")); // "backgroundColor"

Sanitize Input

⚠️ JANGAN PARSE HTML DENGAN REGEX

HTML adalah context-free grammar, bukan regular language — secara teori dan praktik tidak bisa diparse benar dengan regex murni. Begitu kamu mulai handle nested tag, CDATA, comment, attribute dengan tanda kurung, atau script tag — pattern kamu akan ambruk. Untuk parse HTML sungguhan selalu pakai parser: DOMParser di browser, JSDOM atau cheerio di Node, HTMLParser di Python, Jsoup di Java.

Ada jawaban Stack Overflow legendaris dari 2009 ketika seseorang nanya "regex untuk parse HTML" — jawaban yang di-upvote ribuan kali adalah teriakan panik tentang Cthulhu muncul karena HTML tidak bisa diparse dengan regex. Cari saja "stackoverflow regex html cthulhu" — itu meme abadi yang berakar dari kebenaran teknis.

Pattern di bawah ini hanya aman untuk input yang dikontrol penuh (template kamu sendiri, bukan input user). Kalau ada user input, pakai library:

// "Hapus tag" sederhana — HANYA untuk teks trusted (template internal)
// JANGAN dipakai untuk sanitize input user — pakai DOMPurify
function stripTags(html) {
  return html.replace(/<[^>]*>/g, "");
}
console.log(stripTags("<p>Halo <b>dunia</b></p>"));
// "Halo dunia"

// Akan PECAH untuk:
// stripTags("<p title=\">\">halo</p>")        → "halo" (atribut dengan > di dalam)
// stripTags("<script>x = "</script>"</script>") → ?? (CDATA-like)
// stripTags("<!-- > komentar > -->")          → "  -->"

// Untuk user input, SELALU pakai library proper:
// import DOMPurify from "dompurify";
// DOMPurify.sanitize(htmlKotor);

// Escape HTML entities (ini AMAN — replace karakter satu-satu)
function escapeHtml(str) {
  return str
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;");
}

Template Sederhana

function template(str, data) {
  return str.replace(/\{\{(\w+)\}\}/g, (_, key) => data[key] || "");
}

const result = template("Halo {{nama}}, umur {{umur}} tahun", {
  nama: "Budi",
  umur: 25
});
console.log(result); // "Halo Budi, umur 25 tahun"

🎭 Analogi sehari-hari: Replace = find & replace di Word document. Plain replace = ganti exact match. Regex replace = ganti pakai pola + bisa rujuk capture ($1). Function replace = setiap match diproses logic — kayak Excel formula based on cell value.

💡 Function callback = killer feature: replace(regex, fn) memungkinkan transformasi berdasar logic kompleks. Format date, currency, conditional uppercase, lookup table — semua bisa. Kalau pakai static replacement aja, banyak transformasi gak mungkin.

⚠️ Jebakan klasik:

🎯 Pattern transformation:

TL;DR: String.replace() dengan regex = transformasi powerful. $1, $2 reference capture group. Callback function = logic kompleks per match. JANGAN parse HTML/XML/JSON dengan regex (Cthulhu summon). Pakai DOMPurify untuk sanitize HTML.

Yang akan kamu pelajari