Ubah Isi Teks Otomatis Pakai Fungsi String Replace

Ubah Isi Teks Otomatis Pakai Fungsi String Replace
Photo by Miguel Tomás / Unsplash

Dalam dunia pemrograman, sering kali kita perlu mengubah isi teks atau mengganti bagian tertentu dalam string. Misalnya, kamu ingin mengganti semua kata "lama" dengan "baru" dalam sebuah paragraf. Nah, di JavaScript, tugas ini jadi super gampang dengan metode String.replace().

Fungsi replace() adalah alat serbaguna yang memungkinkan kamu mengganti teks berdasarkan substring atau pola regex (regular expression). Yuk, kita bahas cara kerja fungsi ini, bagaimana cara menggunakannya, dan studi kasus penggunaannya.

Apa Itu replace()?

replace() adalah metode bawaan JavaScript yang digunakan untuk mengganti sebagian isi string dengan teks atau pola baru. Metode ini sangat fleksibel karena bisa bekerja dengan teks biasa atau pola regex.

Sintaks:

string.replace(searchValue, newValue);
  • searchValue: Substring atau pola regex yang ingin diganti.
  • newValue: Teks baru yang akan menggantikan searchValue.

Contoh Dasar Penggunaan replace()

1. Mengganti Substring Biasa

Gunakan string sederhana sebagai searchValue untuk mengganti teks tertentu.

let teks = "Saya suka kopi.";
let hasil = teks.replace("kopi", "teh");
console.log(hasil);

Output:

Saya suka teh.

2. Menggunakan Regex untuk Fleksibilitas

Dengan regex, kamu bisa mengganti teks lebih dinamis. Contoh, mengganti kata tanpa memedulikan huruf besar/kecil:

let teks = "Saya suka Kopi.";
let hasil = teks.replace(/kopi/i, "teh"); // 'i' untuk ignore case
console.log(hasil);

Output:

Saya suka teh.

3. Mengganti Semua Kemunculan

Gunakan flag g (global) pada regex untuk mengganti semua kemunculan substring.

let teks = "Kopi adalah minuman kopi favorit saya.";
let hasil = teks.replace(/kopi/gi, "teh");
console.log(hasil);

Output:

Teh adalah minuman teh favorit saya.

Menggunakan Fungsi dalam newValue

Fungsi replace() juga mendukung penggunaan callback function untuk menghasilkan teks pengganti secara dinamis.

Contoh: Mengubah Huruf Kecil Menjadi Besar

let teks = "halo dunia";
let hasil = teks.replace(/\b[a-z]/g, (huruf) => huruf.toUpperCase());
console.log(hasil);

Output:

Halo Dunia

Penjelasan:

  • \b[a-z]: Menangkap huruf kecil di awal setiap kata.
  • Callback akan mengganti huruf kecil menjadi besar dengan toUpperCase().

Studi Kasus Penggunaan replace()

1. Membersihkan Format Nomor Telepon

Misalnya, kamu ingin menghapus semua spasi atau tanda hubung dari nomor telepon.

let nomor = "0812-345-678";
let hasil = nomor.replace(/[-\s]/g, "");
console.log(hasil);

Output:

0812345678

2. Mengganti Placeholder dalam Template

Kamu bisa menggunakan replace() untuk mengganti placeholder dalam teks template.

let template = "Halo, nama saya {{nama}}.";
let hasil = template.replace("{{nama}}", "Budi");
console.log(hasil);

Output:

Halo, nama saya Budi.

3. Cek dan Ganti Kata Spesifik

Ganti kata "dilarang" menjadi "tidak dianjurkan" untuk membuat teks lebih sopan.

let teks = "Merokok di sini dilarang.";
let hasil = teks.replace("dilarang", "tidak dianjurkan");
console.log(hasil);

Output:

Merokok di sini tidak dianjurkan.

Keterbatasan replace()

  1. Case Sensitive Secara default, replace() peka terhadap huruf besar/kecil. Gunakan regex dengan flag i untuk pencarian case-insensitive.

Hanya Mengganti Pertama Kali (Tanpa g) Jika kamu tidak menggunakan regex dengan flag g, hanya kemunculan pertama yang akan diganti.

let teks = "Kopi adalah kopi favorit saya.";
let hasil = teks.replace("kopi", "teh");
console.log(hasil);

Output:

Teh adalah kopi favorit saya.

Tips dan Trik Menggunakan replace()

  1. Gunakan Regex untuk Fleksibilitas Regex memungkinkan pencarian yang lebih dinamis dibanding substring biasa.
  2. Manfaatkan Callback Function Callback di newValue memberi kendali lebih saat mengganti teks, terutama jika penggantian bergantung pada teks yang ditemukan.
  3. Tangani Hasil yang Tidak Sesuai Selalu pastikan teks yang diganti ada dalam string untuk menghindari bug.

Kesimpulan

Fungsi replace() di JavaScript adalah alat yang powerful untuk mengganti teks dalam string. Dengan dukungan regex dan callback function, metode ini sangat fleksibel dan bisa digunakan dalam berbagai kebutuhan, mulai dari manipulasi teks sederhana hingga pengolahan data yang kompleks.