Cara Replace String di JavaScript dan Contohnya

Tutorial mudah replace string di JavaScript dengan contoh-contoh sederhana.
RevoU Staff
January 6, 2024
5
min read

Mau Belajar

Software Engineering

?

Belajar di RevoU! Dapatkan skill digital paling in-demand langsung dari praktisi terbaik di bidangnya. Kelas online 100% LIVE, 1:1 career coaching, dan akses ke Community Hub dengan 6000+ member selamanya untuk support perkembangan karir kamu!
DAFTAR FULL PROGRAMCOBA COURSE GRATIS

Overview

Fungsi replace di JavaScript berperan penting dalam mengelola dan memanipulasi string. Artikel ini menjelaskan cara mudah dengan contoh-contoh sederhana.

Memasuki dunia JavaScript, kita sering kali menemukan tantangan dalam mengelola dan memanipulasi teks. Di sinilah fungsi replace() berperan sebagai alat serbaguna.

Artikel ini mengupas tuntas kegunaan dan fleksibilitas fungsi replace() dalam JavaScript, menjelaskan cara kerjanya, dan mengapa fungsi ini menjadi salah satu metode manipulasi string yang paling sering digunakan.

Kita juga akan menjelajahi berbagai pengaplikasian dari fungsi ini, mulai dari penggantian teks sederhana sampai implementasi regular expressions yang lebih kompleks.

Fungsi replace() di JavaScript

Replace() di JavaScript adalah metode untuk mencari teks tertentu dalam sebuah string dan menggantinya dengan teks lain.

Keunikan dari fungsi ini terletak pada kemampuannya untuk menghasilkan string baru sebagai hasil penggantian, tanpa mengubah string asli. Proses ini sangat penting karena string di JavaScript bersifat immutable, artinya tidak dapat diubah setelah dibuat.

Penggunaan fungsi replace() bisa untuk hal sederhana, seperti mengganti satu kata dengan kata lain, atau lebih kompleks, seperti menggunakan regular expressions untuk mencari dan mengganti pola teks tertentu. Dengan fleksibilitas dan kemudahan penggunaannya, replace() memungkinkan manipulasi teks yang efisien dalam berbagai skenario pemrograman.

Contoh penggunaan dasar dari replace() adalah sebagai berikut:

Dalam contoh di atas, kita mencari kata "TV" dalam string teks dan menggantinya dengan "RevoU". Hasilnya, kita mendapatkan string baru yang disimpan dalam variabel teksBaru.

Fungsi replace() juga bisa digunakan dengan regular expressions (regex). Kamu dapat mencari pola teks yang lebih kompleks. Misalnya, jika kamu ingin mengganti setiap spasi dengan tanda hubung, kamu bisa menggunakan regex seperti ini:

Syntax JavaScript Replace 

Setelah memahami fungsi dasar dari replace() di JavaScript, mari kita bahas lebih lanjut tentang sintaksnya.

Sintaks dasar dari fungsi replace() adalah sebagai berikut:

  • String adalah string asli yang ingin dimodifikasi.
  • searchValue adalah nilai yang ingin dicari dalam string tersebut;
  • newValue adalah nilai yang akan menggantikan searchValue dalam string.

Parameter

  • searchValue bisa berupa teks biasa atau regular expression (regex). Jika searchValue adalah teks biasa, hanya kemunculan pertama dari teks tersebut yang akan diganti. Jika menggunakan regex, kamu bisa menentukan pola yang lebih kompleks dan menggunakan flag seperti g untuk mengganti semua kemunculan yang cocok.
  • newValue bisa berupa string biasa atau fungsi. Jika menggunakan fungsi, setiap kemunculan searchValue akan diganti dengan hasil kembalian dari fungsi tersebut.

Cara Replace String dengan String Lain

Berikut cara mengganti substring dalam string dengan string lain beserta contohnya:

  • Tentukan string asli: pertama, kamu perlu memiliki string asli yang ingin dimodifikasi. String ini bisa berupa teks apa saja.
  • Identifikasi substring yang ingin diganti: tentukan bagian dari string yang ingin kamu ganti. Ini bisa berupa kata, frase, atau karakter tertentu dalam string asli.
  • Tentukan string pengganti: pilih string yang akan digunakan untuk menggantikan substring yang telah kamu identifikasi.
  • Gunakan metode replace(): terapkan metode replace() pada string asli, dengan memasukkan substring yang ingin diganti sebagai parameter pertama dan string pengganti sebagai parameter kedua.
  • Simpan atau gunakan hasilnya: hasil dari operasi replace() adalah string baru. Kamu bisa menyimpannya dalam variabel baru atau langsung menggunakannya sesuai kebutuhan.

Contoh 1: mengganti kata dalam kalimat

Kamu memiliki kalimat "Saya suka makan apel." dan ingin mengganti kata "apel" dengan "jeruk".

Contoh 2: mengganti beberapa kata

Kamu memiliki kalimat "Hujan di pagi hari. Hujan di sore hari." dan ingin mengganti semua kemunculan kata "Hujan" dengan "Cerah".

FAQ (Frequently Ask Questions)

Bagaimana cara mengganti semua kemunculan substring dalam sebuah string dengan JavaScript?

Untuk mengganti semua kemunculan substring dalam sebuah string di JavaScript, gunakan metode replaceAll() atau regular expression dengan flag global (g) dalam metode replace().

Regular expression memberikan keleluasaan dalam mencari pola teks kompleks. Dengan menambahkan flag g, kamu dapat mengganti setiap kemunculan substring yang cocok dalam string.

Meskipun metode replaceAll() juga dapat digunakan untuk tujuan sama, yaitu mengganti semua kemunculan substring tertentu, penggunaannya tidak seintuitif replace() dengan regex. Selain itu, replaceAll() tidak didukung di semua browser.

Apakah metode replace() JavaScript bersifat case-sensitive?

Ya, metode replace() di JavaScript bersifat case-sensitive. Artinya, metode tersebut membedakan huruf besar dan huruf kecil saat mencari substring yang akan diganti.

Misalnya, jika kamu mencari kata "apel" menggunakan replace(), metode ini tidak akan mengganti "Apel" dengan huruf 'A' besar, kecuali kamu menggunakan regular expression dengan flag case-insensitive (i).

RevoU Staff
Kickstart your career in tech with RevoU!

Masih ragu? Coba dulu 3 hari, GRATIS
di Full-Stack Trial Class!

Rasakan pengalaman belajar di RevoU Full-Stack Program: Kelas 100% LIVE, Mini portofolio lewat hands-on assignment, Bimbingan Team Lead & small group discussion. Kalau cocok, kamu bisa lanjut daftar Full Program dengan kesempatan Fast-Track (skip semua tes seleksi masuk, langsung ke tahap akhir!)

Masih ragu? Coba dulu 3 hari, GRATIS
di Full-Stack Trial Class!

Rasakan pengalaman belajar di RevoU Full-Stack Program: Kelas 100% LIVE, Mini portofolio lewat hands-on assignment, Bimbingan Team Lead & small group discussion. Kalau cocok, kamu bisa lanjut daftar Full Program dengan kesempatan Fast-Track (skip semua tes seleksi masuk, langsung ke tahap akhir!)

Masih ragu? Coba dulu 3 hari, GRATIS
di Full-Stack Trial Class!

Rasakan pengalaman belajar di RevoU Full-Stack Program: Kelas 100% LIVE, Mini portofolio lewat hands-on assignment, Bimbingan Team Lead & small group discussion. Kalau cocok, kamu bisa lanjut daftar Full Program dengan kesempatan Fast-Track (skip semua tes seleksi masuk, langsung ke tahap akhir!)

Artikel Lainnya

Mau belajar

Software Engineering

?

Belajar di RevoU! Dapatkan skill digital paling in-demand langsung dari praktisi terbaik di bidangnya. Kelas online 100% LIVE, 1:1 career coaching, dan akses ke Community Hub dengan 6000+ member selamanya untuk support perkembangan karir kamu!
Daftar Isi

Mulai karirmu dalam

Software Engineering

Belajar di RevoU! Dapatkan skill digital paling in-demand langsung dari praktisi terbaik di bidangnya. Kelas online 100% LIVE, 1:1 career coaching, dan akses ke Community Hub dengan 6000+ member selamanya untuk support perkembangan karir kamu!

Mau Belajar

Software Engineering

?

Belajar di RevoU! Dapatkan skill digital paling in-demand langsung dari praktisi terbaik di bidangnya. Kelas online 100% LIVE, 1:1 career coaching, dan akses ke Community Hub dengan 6000+ member selamanya untuk support perkembangan karir kamu!

DAFTAR FULL PROGRAM

Mau Belajar

Software Engineering

?

Cara Replace String di JavaScript dan Contohnya

Tutorial mudah replace string di JavaScript dengan contoh-contoh sederhana.
RevoU Staff
January 6, 2024
5
min read

Overview

Fungsi replace di JavaScript berperan penting dalam mengelola dan memanipulasi string. Artikel ini menjelaskan cara mudah dengan contoh-contoh sederhana.

Memasuki dunia JavaScript, kita sering kali menemukan tantangan dalam mengelola dan memanipulasi teks. Di sinilah fungsi replace() berperan sebagai alat serbaguna.

Artikel ini mengupas tuntas kegunaan dan fleksibilitas fungsi replace() dalam JavaScript, menjelaskan cara kerjanya, dan mengapa fungsi ini menjadi salah satu metode manipulasi string yang paling sering digunakan.

Kita juga akan menjelajahi berbagai pengaplikasian dari fungsi ini, mulai dari penggantian teks sederhana sampai implementasi regular expressions yang lebih kompleks.

Fungsi replace() di JavaScript

Replace() di JavaScript adalah metode untuk mencari teks tertentu dalam sebuah string dan menggantinya dengan teks lain.

Keunikan dari fungsi ini terletak pada kemampuannya untuk menghasilkan string baru sebagai hasil penggantian, tanpa mengubah string asli. Proses ini sangat penting karena string di JavaScript bersifat immutable, artinya tidak dapat diubah setelah dibuat.

Penggunaan fungsi replace() bisa untuk hal sederhana, seperti mengganti satu kata dengan kata lain, atau lebih kompleks, seperti menggunakan regular expressions untuk mencari dan mengganti pola teks tertentu. Dengan fleksibilitas dan kemudahan penggunaannya, replace() memungkinkan manipulasi teks yang efisien dalam berbagai skenario pemrograman.

Contoh penggunaan dasar dari replace() adalah sebagai berikut:

Dalam contoh di atas, kita mencari kata "TV" dalam string teks dan menggantinya dengan "RevoU". Hasilnya, kita mendapatkan string baru yang disimpan dalam variabel teksBaru.

Fungsi replace() juga bisa digunakan dengan regular expressions (regex). Kamu dapat mencari pola teks yang lebih kompleks. Misalnya, jika kamu ingin mengganti setiap spasi dengan tanda hubung, kamu bisa menggunakan regex seperti ini:

Syntax JavaScript Replace 

Setelah memahami fungsi dasar dari replace() di JavaScript, mari kita bahas lebih lanjut tentang sintaksnya.

Sintaks dasar dari fungsi replace() adalah sebagai berikut:

  • String adalah string asli yang ingin dimodifikasi.
  • searchValue adalah nilai yang ingin dicari dalam string tersebut;
  • newValue adalah nilai yang akan menggantikan searchValue dalam string.

Parameter

  • searchValue bisa berupa teks biasa atau regular expression (regex). Jika searchValue adalah teks biasa, hanya kemunculan pertama dari teks tersebut yang akan diganti. Jika menggunakan regex, kamu bisa menentukan pola yang lebih kompleks dan menggunakan flag seperti g untuk mengganti semua kemunculan yang cocok.
  • newValue bisa berupa string biasa atau fungsi. Jika menggunakan fungsi, setiap kemunculan searchValue akan diganti dengan hasil kembalian dari fungsi tersebut.

Cara Replace String dengan String Lain

Berikut cara mengganti substring dalam string dengan string lain beserta contohnya:

  • Tentukan string asli: pertama, kamu perlu memiliki string asli yang ingin dimodifikasi. String ini bisa berupa teks apa saja.
  • Identifikasi substring yang ingin diganti: tentukan bagian dari string yang ingin kamu ganti. Ini bisa berupa kata, frase, atau karakter tertentu dalam string asli.
  • Tentukan string pengganti: pilih string yang akan digunakan untuk menggantikan substring yang telah kamu identifikasi.
  • Gunakan metode replace(): terapkan metode replace() pada string asli, dengan memasukkan substring yang ingin diganti sebagai parameter pertama dan string pengganti sebagai parameter kedua.
  • Simpan atau gunakan hasilnya: hasil dari operasi replace() adalah string baru. Kamu bisa menyimpannya dalam variabel baru atau langsung menggunakannya sesuai kebutuhan.

Contoh 1: mengganti kata dalam kalimat

Kamu memiliki kalimat "Saya suka makan apel." dan ingin mengganti kata "apel" dengan "jeruk".

Contoh 2: mengganti beberapa kata

Kamu memiliki kalimat "Hujan di pagi hari. Hujan di sore hari." dan ingin mengganti semua kemunculan kata "Hujan" dengan "Cerah".

FAQ (Frequently Ask Questions)

Bagaimana cara mengganti semua kemunculan substring dalam sebuah string dengan JavaScript?

Untuk mengganti semua kemunculan substring dalam sebuah string di JavaScript, gunakan metode replaceAll() atau regular expression dengan flag global (g) dalam metode replace().

Regular expression memberikan keleluasaan dalam mencari pola teks kompleks. Dengan menambahkan flag g, kamu dapat mengganti setiap kemunculan substring yang cocok dalam string.

Meskipun metode replaceAll() juga dapat digunakan untuk tujuan sama, yaitu mengganti semua kemunculan substring tertentu, penggunaannya tidak seintuitif replace() dengan regex. Selain itu, replaceAll() tidak didukung di semua browser.

Apakah metode replace() JavaScript bersifat case-sensitive?

Ya, metode replace() di JavaScript bersifat case-sensitive. Artinya, metode tersebut membedakan huruf besar dan huruf kecil saat mencari substring yang akan diganti.

Misalnya, jika kamu mencari kata "apel" menggunakan replace(), metode ini tidak akan mengganti "Apel" dengan huruf 'A' besar, kecuali kamu menggunakan regular expression dengan flag case-insensitive (i).

RevoU Staff
Kickstart your career in tech with RevoU!
Menu