JavaScript Katana

Metode replace() pada String JavaScript: Dasar, Regex, dan Contoh Praktis

Pemrosesan Data (String, Angka, Tanggal, Array, Objek)
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Pendahuluan

JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam pengembangan web. Khususnya, manipulasi string merupakan fitur yang sering dipakai saat menangani masukan pengguna dan pemrosesan data. Di antara fitur‑fitur tersebut, metode replace() dikenal sebagai alat yang kuat yang memungkinkan Anda melakukan operasi penggantian string dengan mudah.

Dalam artikel ini, kami akan menjelaskan secara menyeluruh metode JavaScript replace() mulai dari dasar hingga penggunaan lanjutan. Selain contoh‑contoh dasar, kami juga akan membahas penggantian lanjutan menggunakan regular expression dan kasus penggunaan dunia nyata yang praktis. Konten ini dirancang agar berguna bagi pemula hingga pengembang menengah.

2. Dasar‑dasar Metode replace()

Apa Itu Metode replace()?

Metode replace() adalah fungsi bawaan JavaScript yang digunakan untuk mengganti bagian tertentu dari sebuah string dengan string lain. Dengan menggunakan metode ini, Anda dapat mengedit dan mentransformasi data string secara efisien.

Sintaks

string.replace(pattern, replacement)
  • pattern : String atau regular expression yang akan dicari.
  • replacement : String pengganti atau fungsi callback.

Penggunaan Dasar

Contoh berikut menunjukkan penggantian string sederhana.

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

Pada kode ini, string “world” diganti dengan “JavaScript”.

Catatan Penting

  1. replace() hanya mengganti kemunculan pertama yang cocok.
  2. Untuk mengganti semua kemunculan yang cocok, Anda harus menggunakan regular expression dengan flag g.

3. Penggantian Lanjutan Menggunakan Regular Expressions

Apa Itu Regular Expressions?

Regular expressions adalah alat yang kuat untuk mendeskripsikan pola string. Dalam JavaScript, regular expressions memungkinkan Anda melakukan pencocokan pola yang kompleks dan operasi penggantian dengan mudah.

Contoh Penggantian Menggunakan Regular Expressions

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

Jenis‑jenis Flag

  • g : Penggantian global (mengganti semua kecocokan)
  • i : Penggantian tidak sensitif huruf besar/kecil
  • m : Mode multiline

Contoh Lanjutan: Penggantian Tidak Sensitif Huruf Besar/Kecil

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

4. Mengganti Beberapa Kemunculan

Mengganti Semua Kecocokan

Untuk mengganti semua kemunculan yang cocok dalam sebuah string, gunakan flag g pada regular expression.

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

Teknik Mengganti Beberapa String Berbeda 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"

Pendekatan ini memungkinkan Anda mengganti banyak pola sekaligus sekaligus meningkatkan keterbacaan kode.

5. Penggantian Dinamis Menggunakan Fungsi Callback

Apa Itu Fungsi Callback?

Fungsi callback dipanggil selama proses penggantian dan memungkinkan Anda menyesuaikan operasi menggunakan informasi kecocokan saat ini.

Contoh Penggantian Dinamis

1. Menyusun Ulang String

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

2. Mengonversi 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. Menangani Karakter Khusus dan Escape Sequence

Apa Itu Karakter Khusus?

Dalam regular expression, beberapa karakter memiliki makna khusus sebagai metakarakter. Untuk menggunakan karakter‑karakter ini secara harfiah dalam operasi pencarian atau penggantian, Anda harus menggunakan urutan pelolosan.

Mengganti String yang Mengandung Karakter Khusus

Contoh 1: Mengganti String yang Mengandung Titik

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

Contoh 2: Menghapus Tanda Dollar

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

Mengganti Karakter Escape HTML

Contoh: Meloloskan 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. Kasus Penggunaan Praktis dan Teknik Lanjutan

Mengonversi Baris Baru menjadi Tag 

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

Memanipulasi 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"

Menyaring 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 dan Praktik Terbaik

Sadari Bahwa 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."

Jangan Lupa Meloloskan 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: Menjelaskan sintaks dan contoh sederhana metode replace().
  • Aplikasi Regular Expression: Membahas cara menggunakan regular expression dan flag untuk operasi penggantian lanjutan.
  • Fungsi Callback: Menunjukkan teknik penggantian dinamis dengan contoh praktis.
  • Contoh Praktis: Memperkenalkan teknik berguna seperti manipulasi URL dan penyaringan input.
  • Praktik Terbaik: Menjelaskan catatan penting serta pertimbangan kinerja.

Pemikiran Akhir

Metode JavaScript replace() adalah alat yang serbaguna dan kuat yang dapat digunakan secara efektif mulai dari skenario dasar hingga lanjutan. Kami akan terus menyediakan konten berguna terkait JavaScript, jadi tetap ikuti kami.

広告