Panduan Lengkap JavaScript replace(): Dasar hingga Lanjutan dengan Contoh Praktis

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Pendahuluan

2. Dasar-dasar Metode replace()

Apa itu metode replace()?

Sintaks

string.replace(pattern, replacement)

• pattern: String atau ekspresi reguler yang dicari.
• replacement: String pengganti, atau fungsi callback.

Penggunaan Dasar

let text = "Hello, world!";
let result = text.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

Hal yang Perlu Diperhatikan

1. replace() hanya mengganti bagian pertama yang cocok.
2. Jika ingin mengganti semua kecocokan, gunakan ekspresi reguler dengan flag g.

3. Penggantian Lanjutan dengan Regex

Apa itu Regex?

Contoh Penggantian dengan Regex

let text = "apple, banana, apple";
let result = text.replace(/apple/g, "orange");
console.log(result); // "orange, banana, orange"

Jenis Flag

• g: Global (ganti semua kecocokan)
• i: Abaikan perbedaan huruf besar/kecil
• m: Mode multi-baris

Contoh: Penggantian Tanpa Membeda Huruf Besar/Kecil

let text = "Hello, hello, HELLO";
let result = text.replace(/hello/gi, "hi");
console.log(result); // "hi, hi, hi"

4. Mengganti Banyak Bagian

Penggantian Semua Kecocokan

let text = "cat dog cat bird";
let result = text.replace(/cat/g, "fish");
console.log(result); // "fish dog fish bird"

Teknik Mengganti Banyak String Sekaligus

let text = "red blue green";
let replacements = {red: "pink", blue: "cyan", green: "lime"};

Object.keys(replacements).forEach(key => {
  let regex = new RegExp(key, "g");
  text = text.replace(regex, replacements[key]);
});

console.log(text); // "pink cyan lime"

5. Penggantian Dinamis dengan Callback Function

Apa itu Callback Function?

Contoh Penggantian Dinamis

1. Menukar Urutan String

let text = "Tanaka, Taro";
let result = text.replace(/(w+), (w+)/, (match, p1, p2) => {
  return `${p2} ${p1}`;
});
console.log(result); // "Taro Tanaka"

2. Konversi Format Tanggal

let date = "2024-12-25";
let formattedDate = date.replace(/(d{4})-(d{2})-(d{2})/, (match, year, month, day) => {
  return `${month}/${day}/${year}`;
});
console.log(formattedDate); // "12/25/2024"

6. Penanganan Karakter Khusus & Escape Sequence

Apa itu Karakter Khusus?

Contoh Penggantian dengan Karakter Khusus

Contoh 1: Mengganti String dengan Titik

let text = "www.example.com";
let result = text.replace(/./g, "-");
console.log(result); // "www-example-com"

Contoh 2: Menghapus Simbol Dollar

let price = "$1,000";
let result = price.replace(/$/g, "");
console.log(result); // "1,000"

Penggantian Karakter HTML Escape

Contoh: Escape Tag HTML

let html = "<div>Hello!</div>";
let result = html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
console.log(result);
// "&lt;div&gt;Hello!&lt;/div&gt;"

7. Contoh Praktis & Teknik Lanjutan

Mengganti Karakter Baris Baru dengan Tag <br>

let text = "HellonWorldnJavaScript";
let result = text.replace(/n/g, "<br>");
console.log(result);
// "Hello<br>World<br>JavaScript"

Manipulasi Parameter URL

let url = "https://example.com/?id=123&lang=en";
let result = url.replace(/lang=en/, "lang=ja");
console.log(result);
// "https://example.com/?id=123&lang=ja"

Sanitasi Input Pengguna

function sanitizeInput(input) {
  return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

let userInput = "<script>alert('XSS');</script>";
let safeInput = sanitizeInput(userInput);
console.log(safeInput);
// "&lt;script&gt;alert('XSS');&lt;/script&gt;"

8. Catatan Penting & Best Practice

Hanya Kecocokan Pertama yang Diganti

let text = "apple apple orange";
let result = text.replace("apple", "banana");
console.log(result); // "banana apple orange"

Perhatikan Sensitivitas Huruf Besar/Kecil

let text = "JavaScript is powerful. javascript is versatile.";
let result = text.replace(/javascript/gi, "JS");
console.log(result);
// "JS is powerful. JS is versatile."

Perhatikan Escape Karakter Khusus

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

let text = "Price: $100";
let result = text.replace(new RegExp(escapeRegExp("$"), "g"), "USD ");
console.log(result);
// "Price: USD 100"

9. Kesimpulan

Ringkasan Artikel

• Penggunaan dasar: Sintaks dan contoh sederhana metode replace().
• Penerapan regex: Cara menggunakan regex dan flag untuk penggantian lanjutan.
• Callback function: Metode penggantian dinamis dan contoh penerapannya.
• Contoh praktis: Manipulasi URL, sanitasi input, dan teknik berguna lainnya.
• Best practice: Hal-hal yang perlu diperhatikan serta tips performa.

Penutup