Masukkan Password
63 Penjelasan Metode Replace JavaScript: String, Regex, & Callback Dinamis
Lecture ini membahas method String yang sangat penting: replace() dan replaceAll().
Kalau sebelumnya kita belajar:
slice()→ mengambil sebagian Stringtrim()→ membersihkan whitespace di awal/akhirtoUpperCase()→ mengubah huruf menjadi uppercaseconcat()→ menggabungkan String
maka sekarang:
replace()→ mencari bagian tertentu dari String lalu menggantinya dengan sesuatu yang lain.
1. Gambaran besar replace()
Bentuk paling sederhana:
string.replace(searchValue, replacementValue)
Artinya:
String asli
↓
cari sesuatu
↓
ganti dengan sesuatu
↓
String baru
Contoh:
let message = "Hello World";
let result = message.replace("World", "JavaScript");
console.log(result);
Hasil:
Hello JavaScript
Jadi:
"Hello World"
↓
cari "World"
↓
ganti dengan "JavaScript"
↓
"Hello JavaScript"
2. replace() tidak mengubah String asli
Ini sama seperti method String yang sudah kita pelajari sebelumnya.
let message = "Hello World";
let result = message.replace("World", "JavaScript");
console.log(message);
console.log(result);
Hasil:
Hello World
Hello JavaScript
Perhatikan:
message
↓
"Hello World"
result
↓
"Hello JavaScript"
replace() membuat String baru dan mengembalikannya.
Ini berkaitan dengan konsep:
String di JavaScript bersifat immutable.
Jadi kalau ingin mengubah isi variabel:
message = message.replace("World", "JavaScript");
Sekarang:
message
↓
"Hello JavaScript"
3. Dua bagian penting dalam replace()
Perhatikan:
message.replace("World", "JavaScript");
Ada dua argument:
replace()
│
┌─────────┴─────────┐
↓ ↓
searchValue replacementValue
↓ ↓
"World" "JavaScript"
Argument pertama
"World"
→ apa yang ingin kita cari/ganti.
Argument kedua
"JavaScript"
→ mau diganti menjadi apa.
Jadi:
"Hello World".replace("World", "JavaScript")
dibaca:
“Cari
World, lalu ganti denganJavaScript.”
4. replace() juga bisa mengganti karakter
Tidak harus satu kata.
Misalnya:
let text = "Hello World!";
let result = text.replace("!", ".");
console.log(result);
Hasil:
Hello World.
Artinya:
"Hello World!"
↑
!
↓
.
"Hello World."
Jadi replace() bisa digunakan untuk mengganti:
- kata
- karakter
- bagian tertentu dari String
- pola tertentu menggunakan Regular Expression
5. Hal yang sangat penting: replace() secara default hanya mengganti occurrence pertama
Ini mungkin bagian paling penting dari lecture.
Misalnya:
let text = "test test test";
Kita melakukan:
let result = text.replace("test", "experiment");
Hasilnya:
experiment test test
Bukan:
experiment experiment experiment
Kenapa?
Karena kalau searchValue berupa String biasa, replace() secara default hanya mengganti kemunculan pertama.
Visual:
"test test test"
↑
│
└── hanya ini yang diganti
↓
"experiment test test"
6. Apa itu occurrence?
Occurrence artinya kemunculan.
Misalnya:
"JavaScript is fun. JavaScript is powerful."
Kata JavaScript muncul dua kali.
Berarti:
JavaScript → occurrence ke-1
JavaScript → occurrence ke-2
Kalau:
text.replace("JavaScript", "JS");
hasilnya:
"JS is fun. JavaScript is powerful."
Hanya occurrence pertama.
7. Bagaimana mengganti semua occurrence?
Ada dua cara utama yang dibahas lecture.
Cara 1 — Regular Expression + flag g
text.replace(/test/g, "experiment");
Cara 2 — replaceAll()
text.replaceAll("test", "experiment");
Kita bahas satu per satu.
8. Regular Expression dan flag g
Kalau ingin menggunakan Regular Expression, kita menulis pattern di antara:
/ /
Contoh:
/test/
Artinya kita membuat sebuah pattern untuk mencari:
test
Kemudian kita tambahkan flag:
/test/g
g berarti:
global
Artinya cari semua occurrence, bukan hanya yang pertama.
Contoh
let text = "test test test";
let result = text.replace(/test/g, "experiment");
console.log(result);
Hasil:
experiment experiment experiment
Visual:
"test test test"
↓ ↓ ↓
g g g
↓ ↓ ↓
experiment experiment experiment
9. Apa bedanya "test" dengan /test/g?
Ini penting.
String biasa
text.replace("test", "experiment");
→ default hanya occurrence pertama.
Regular Expression dengan g
text.replace(/test/g, "experiment");
→ semua occurrence.
Bandingkan:
| Kode | Hasil |
|---|---|
replace("test", "experiment") | occurrence pertama |
replace(/test/g, "experiment") | semua occurrence |
10. Flag g sebenarnya melakukan apa?
g = global search.
Tanpa g:
/test/
kira-kira:
“Cari
test.”
Dengan g:
/test/g
kira-kira:
“Cari semua
test.”
Mental model:
/test/
↓
"cari satu"
/test/g
↓
"cari semuanya"
11. replace() bersifat case-sensitive
Ini juga sangat penting.
Misalnya:
let greeting = "Hello there";
let result = greeting.replace("hello", "Hi");
console.log(result);
Apakah berubah?
Tidak.
Kenapa?
Karena:
Hello
↑
H uppercase
sedangkan kita mencari:
hello
↑
h lowercase
JavaScript membedakan uppercase dan lowercase.
Jadi:
"Hello" ≠ "hello"
untuk pencarian replace() biasa.
12. Contoh case-sensitive
let text = "Hello World";
console.log(text.replace("hello", "Hi"));
Hasil:
Hello World
Tidak ada perubahan.
Tetapi:
console.log(text.replace("Hello", "Hi"));
hasil:
Hi World
Karena:
"Hello"
sama persis dengan yang dicari.
13. Bagaimana melakukan case-insensitive replace?
Gunakan Regular Expression dengan flag:
i
i berarti:
case-insensitive
Contoh:
let greeting = "Hello there";
let result = greeting.replace(/hello/i, "Hi");
console.log(result);
Hasil:
Hi there
Walaupun pattern-nya:
/hello/i
sedangkan String memiliki:
Hello
Tetap ditemukan karena i.
14. g dan i bisa digabung
Ini penting karena keduanya memiliki fungsi berbeda.
/hello/gi
Artinya:
g → cari semua
i → abaikan perbedaan uppercase/lowercase
Contoh:
let text = "Hello hello HELLO";
let result = text.replace(/hello/gi, "Hi");
console.log(result);
Hasil:
Hi Hi Hi
Tanpa i:
text.replace(/hello/gi, "Hi");
kita tidak bisa menangkap semua variasi case.
Tanpa g:
text.replace(/hello/i, "Hi");
hanya occurrence pertama yang diganti.
Jadi:
/hello/
↓
case-sensitive
satu occurrence
/hello/g
↓
case-sensitive
semua occurrence
/hello/i
↓
case-insensitive
satu occurrence
/hello/gi
↓
case-insensitive
semua occurrence
15. replace() bisa menerima callback function
Nah, bagian ini sedikit lebih maju.
Biasanya kita menggunakan:
replace(searchValue, replacementValue)
Misalnya:
text.replace("Hello", "Hi");
Tetapi replacementValue juga bisa berupa function.
Contoh sederhana:
let text = "I have 1 apple and 2 oranges";
let result = text.replace(/\d/g, function(match) {
return Number(match) * 2;
});
console.log(result);
Hasil:
I have 2 apple and 4 oranges
Mari kita bongkar.
16. Apa yang terjadi dengan callback tersebut?
Kita punya:
/\d/g
\d berarti digit/angka.
Dengan g:
cari semua angka
String:
"I have 1 apple and 2 oranges"
↑ ↑
1 2
JavaScript menemukan:
match = "1"
Kemudian callback dijalankan:
function(match) {
return Number(match) * 2;
}
Perhitungannya:
"1"
↓
Number("1")
↓
1
↓ × 2
2
Maka 1 diganti menjadi 2.
Kemudian JavaScript menemukan:
match = "2"
Callback dijalankan lagi:
"2"
↓
Number("2")
↓
2
↓ × 2
4
Maka 2 diganti menjadi 4.
Hasil akhir:
"I have 2 apple and 4 oranges"
17. Jadi callback dipanggil setiap kali ditemukan match
Ini konsep penting.
Misalnya:
let text = "1 2 3";
dan:
text.replace(/\d/g, function(match) {
return Number(match) * 2;
});
JavaScript melakukan kira-kira:
cari "1"
↓
callback("1")
↓
return "2"
cari "2"
↓
callback("2")
↓
return "4"
cari "3"
↓
callback("3")
↓
return "6"
Hasil:
"2 4 6"
Jadi callback tersebut berfungsi sebagai pembuat replacement value.
18. Kenapa lecture mengatakan replacement function?
Karena argument kedua:
function(match) {
return Number(match) * 2;
}
bukan langsung memberikan:
"experiment"
tetapi mengatakan:
“Setiap kali kamu menemukan sesuatu yang cocok, panggil function ini dan gunakan nilai yang dikembalikannya sebagai replacement.”
Mental model:
replace()
↓
cari matching value
↓
ditemukan "2"
↓
callback("2")
↓
Number("2") * 2
↓
"4"
↓
ganti "2" → "4"
19. Tanpa g, callback hanya dijalankan sekali
Misalnya:
let text = "1 2 3";
let result = text.replace(/\d/, function(match) {
return Number(match) * 2;
});
Karena tidak ada g, hanya angka pertama yang diproses.
Hasil:
"2 2 3"
Sedangkan:
let result = text.replace(/\d/g, function(match) {
return Number(match) * 2;
});
hasil:
"2 4 6"
Jadi g tetap penting walaupun replacement-nya menggunakan callback.
20. Sedikit koreksi dari caption lecture
Di lecture ada bagian yang mengatakan kurang lebih bahwa callback adalah “optional second argument”, lalu kemudian dikoreksi sebagai bukan optional.
Cara paling tepat memahaminya:
replace(searchValue, replacementValue)
replacementValue adalah argument kedua dan dalam pemanggilan replace() memang diperlukan.
Yang menarik adalah bentuk replacementValue bisa berupa:
String
text.replace("hello", "hi");
atau:
Function
text.replace("hello", function(match) {
return "hi";
});
Jadi bukan berarti argument kedua hilang/optional. Yang berubah adalah jenis nilainya.
21. replaceAll()
JavaScript modern juga memiliki:
replaceAll()
Tujuannya lebih sederhana:
mengganti semua occurrence dari String tertentu.
Contoh:
let text = "test test test";
let result = text.replaceAll("test", "experiment");
console.log(result);
Hasil:
experiment experiment experiment
22. replace() vs replaceAll()
Ini harus kamu ingat.
replace()
text.replace("test", "experiment");
Secara default:
hanya occurrence pertama
replaceAll()
text.replaceAll("test", "experiment");
semua occurrence
Visual:
replace()
"test test test"
↓
"experiment test test"
replaceAll()
"test test test"
↓
"experiment experiment experiment"
23. Kapan menggunakan replace()?
Gunakan replace() ketika kamu hanya ingin mengganti kemunculan pertama.
Contoh:
let text = "apple apple apple";
let result = text.replace("apple", "orange");
Hasil:
orange apple apple
24. Kapan menggunakan replaceAll()?
Kalau kamu ingin mengganti semua occurrence dan pencariannya cukup berupa String biasa:
let text = "apple apple apple";
let result = text.replaceAll("apple", "orange");
Hasil:
orange orange orange
Lebih mudah dibaca daripada:
text.replace(/apple/g, "orange");
Keduanya bisa menghasilkan hasil yang sama untuk kasus sederhana tersebut.
25. Tapi Regular Expression masih berguna
Jangan berpikir:
“
replaceAll()berarti Regular Expression sudah tidak berguna.”
Tidak.
Regular Expression berguna kalau pola yang dicari lebih kompleks.
Misalnya kita ingin mencari semua angka:
/\d/g
atau pencarian case-insensitive:
/hello/gi
replaceAll() cocok untuk pencarian String literal sederhana:
text.replaceAll("test", "experiment");
Jadi mental modelnya:
String sederhana
↓
replaceAll()
↓
mudah
Pattern kompleks
↓
Regular Expression
↓
replace()
26. Perbandingan lengkap
| Kode | Fungsi |
|---|---|
text.replace("a", "b") | ganti occurrence pertama |
text.replace(/a/g, "b") | ganti semua a |
text.replace(/a/i, "b") | ganti occurrence pertama, case-insensitive |
text.replace(/a/gi, "b") | ganti semua, case-insensitive |
text.replaceAll("a", "b") | ganti semua occurrence |
text.replace(/\d/g, callback) | proses semua angka dengan function |
27. Contoh dunia nyata: mengganti nama
Misalnya:
let message = "Hello John";
Kita ingin mengganti nama:
let result = message.replace("John", "Budi");
console.log(result);
Hasil:
Hello Budi
28. Contoh membersihkan format nomor
Misalnya user memasukkan nomor:
0812-3456-7890
Kita ingin menghilangkan tanda -.
Bisa:
let phone = "0812-3456-7890";
let cleanPhone = phone.replaceAll("-", "");
console.log(cleanPhone);
Hasil:
081234567890
Perhatikan argument kedua:
""
String kosong.
Artinya:
“Ganti
-dengan tidak ada apa-apa.”
Visual:
0812-3456-7890
↑ ↑
hapus hapus
↓
081234567890
Ini contoh penggunaan replaceAll() yang sangat masuk akal.
29. Contoh mengganti format tanggal
Misalnya:
let date = "2026-09-07";
Kita ingin mengganti - menjadi /:
let result = date.replaceAll("-", "/");
console.log(result);
Hasil:
2026/09/07
30. Contoh case-insensitive
Misalnya:
let text = "JavaScript javascript JAVASCRIPT";
Kita ingin semuanya menjadi:
JS
Gunakan:
let result = text.replace(/javascript/gi, "JS");
console.log(result);
Hasil:
JS JS JS
Kenapa /gi?
g → semua occurrence
i → tidak peduli uppercase/lowercase
31. Contoh callback yang lebih mudah
Misalnya kita ingin menambahkan $ di depan setiap angka:
let text = "Price 100 and 200";
let result = text.replace(/\d+/g, function(match) {
return "$" + match;
});
console.log(result);
Hasil:
Price $100 and $200
Perhatikan:
100
↓
callback("100")
↓
"$" + "100"
↓
"$100"
dan:
200
↓
callback("200")
↓
"$200"
Jadi callback memungkinkan replacement menjadi dinamis.
32. replace() + callback sangat powerful
Kalau replacement selalu sama:
text.replaceAll("test", "experiment");
cukup gunakan String.
Tetapi kalau replacement bergantung pada sesuatu yang ditemukan:
text.replace(/\d+/g, function(match) {
// lakukan perhitungan
// lalu return replacement
});
maka callback sangat berguna.
Mental model:
replacement String
↓
"ganti dengan nilai tetap"
replacement Function
↓
"tentukan nilai pengganti
berdasarkan match"
33. Hubungan replace() dengan method String sebelumnya
Sekarang coba kita lihat semua method yang sudah kamu pelajari.
String
│
├── slice()
│ → mengambil bagian
│
├── substring()
│ → mengambil bagian
│
├── trim()
│ → membersihkan ujung
│
├── toUpperCase()
│ → uppercase
│
├── toLowerCase()
│ → lowercase
│
├── padStart()
│ → menambah padding di depan
│
├── padEnd()
│ → menambah padding di belakang
│
├── repeat()
│ → mengulang String
│
├── concat()
│ → menggabungkan String
│
└── replace()
→ mengganti bagian String
34. Hal penting: replace() tidak sama dengan trim()
Keduanya sama-sama bisa “mengubah tampilan” String baru, tetapi tujuannya berbeda.
trim()
" Hello ".trim();
→ membersihkan whitespace di ujung.
Hasil:
"Hello"
replace()
"Hello World".replace("World", "JavaScript");
→ mengganti bagian tertentu.
Hasil:
"Hello JavaScript"
35. Hal penting: replace() tidak sama dengan slice()
slice()
Mengambil sebagian:
"Hello World".slice(0, 5);
Hasil:
"Hello"
replace()
Mengganti sebagian:
"Hello World".replace("World", "JavaScript");
Hasil:
"Hello JavaScript"
Mental model:
slice()
↓
"ambil bagian"
replace()
↓
"ganti bagian"
36. Satu pola yang harus kamu kuasai
Ketika melihat:
let result = text.replace(...);
langsung tanyakan 3 hal:
Pertanyaan 1 — Apa yang dicari?
Argument pertama:
text.replace("test", ...)
↑
yang dicari
Pertanyaan 2 — Diganti menjadi apa?
Argument kedua:
text.replace("test", "experiment")
↑
penggantinya
Pertanyaan 3 — Berapa kali?
replace("test", ...)
↓
default → pertama
replace(/test/g, ...)
↓
semua
replaceAll("test", ...)
↓
semua
Kalau kamu memahami tiga pertanyaan ini, sebagian besar lecture ini sudah kamu kuasai.
37. Cheat sheet replace
// 1. Ganti occurrence pertama
text.replace("test", "experiment");
// 2. Ganti semua menggunakan RegExp
text.replace(/test/g, "experiment");
// 3. Case-insensitive, occurrence pertama
text.replace(/test/i, "experiment");
// 4. Case-insensitive, semua occurrence
text.replace(/test/gi, "experiment");
// 5. Ganti semua dengan replaceAll
text.replaceAll("test", "experiment");
// 6. Replacement dinamis menggunakan callback
text.replace(/\d/g, function(match) {
return Number(match) * 2;
});
38. Ringkasan mental model
Bayangkan String seperti sebuah kalimat di atas kertas.
"Hello World! World!"
replace()
Kamu bilang:
“Cari
World, lalu ganti.”
"Hello JavaScript! World!"
Hanya pertama.
replace() + g
Kamu bilang:
“Cari SEMUA
World, lalu ganti.”
"Hello JavaScript! JavaScript!"
replaceAll()
Kamu juga bilang:
“Cari SEMUA
World, lalu ganti.”
"Hello JavaScript! JavaScript!"
replace() + callback
Kamu bilang:
“Setiap kali kamu menemukan sesuatu, tanyakan kepada function harus diganti menjadi apa.”
match
↓
callback(match)
↓
replacement
↓
ganti
🎯 Kesimpulan akhir
Empat hal yang paling wajib kamu ingat dari lecture ini:
1. replace() menghasilkan String baru
let result = text.replace("old", "new");
String asli tidak berubah.
2. replace() biasa hanya mengganti occurrence pertama
"test test".replace("test", "X");
// "X test"
3. Untuk semua occurrence
Bisa:
"test test".replace(/test/g, "X");
atau lebih sederhana:
"test test".replaceAll("test", "X");
Hasil:
"X X"
4. Callback membuat replacement menjadi dinamis
text.replace(/\d/g, function(match) {
return Number(match) * 2;
});
Artinya:
temukan match
↓
jalankan function
↓
function menentukan replacement
↓
ganti match
Mental model paling singkat:
STRING
│
▼
replace()
│
┌─────────┴──────────┐
│ │
cari apa? ganti jadi apa?
│ │
▼ ▼
"test" / /test/g "experiment"
atau
callback()
Dan satu koreksi kecil dari caption: replace() bukan hanya “mengganti String dengan String”. Argument pengganti bisa berupa String atau function, sehingga kita bisa membuat replacement yang dinamis.