Najkrócej rzecz biorąc, replace zmienia tekst precyzyjnie, ale dopiero dobrze dobrany wzorzec decyduje o efekcie
- `replace()` zwraca nowy string, a oryginału nie modyfikuje.
- Przy zwykłym tekście zwykle zamienia tylko pierwsze dopasowanie.
- Do wielu zamian użyj `replaceAll()` albo wyrażenia regularnego z flagą `g`.
- Funkcja jako drugi argument daje największą kontrolę nad wynikiem.
- Najczęstszy błąd to oczekiwanie, że napis zmieni się „w miejscu”.
Czym jest replace i kiedy naprawdę się przydaje
`replace()` to jedna z tych metod, które wyglądają banalnie, ale oszczędzają sporo kodu. Działa na stringu, przyjmuje wzorzec wyszukiwania i wartość zastępczą, a potem zwraca nowy napis. Oryginał zostaje bez zmian, więc jeśli nie zapiszesz wyniku do zmiennej, nic praktycznego się nie wydarzy.
Jak opisuje MDN, metoda obsługuje zarówno zwykły tekst, jak i wyrażenie regularne, a drugi argument może być zwykłym łańcuchem albo funkcją. To daje dużą elastyczność, ale też oznacza, że trzeba świadomie dobrać sposób użycia. Gdy rozumiesz tę różnicę, łatwiej przewidzieć, czy zamiana obejmie jeden fragment, kilka czy całą serię dopasowań.
W mojej praktyce `replace()` pojawia się najczęściej przy porządkowaniu danych z formularzy, korekcie nazw i przygotowywaniu treści do dalszego przetwarzania. Z tego punktu łatwo przejść do najprostszego użycia, bo właśnie tam najczęściej zaczyna się cała historia.
Najprostsza zamiana tekstu w stringu
Jeśli chcesz podmienić konkretny fragment, najpierw zacznij od prostego stringa. To najszybsza i najczytelniejsza wersja, kiedy dokładnie wiesz, czego szukasz i nie potrzebujesz dodatkowej logiki.
const opis = 'Stary plan SEO';
const nowyOpis = opis.replace('Stary', 'Nowy');
console.log(nowyOpis); // Nowy plan SEO
console.log(opis); // Stary plan SEOTu ważna jest jedna rzecz: przy takim użyciu metoda zamienia pierwsze dopasowanie. Jeśli tekst występuje tylko raz, sprawa jest zamknięta. Jeśli występuje kilka razy, to nadal zobaczysz zmianę tylko w pierwszym miejscu. To nie jest błąd, tylko normalne zachowanie metody.
Takie podejście ma sens przy poprawianiu nagłówków, nazw statusów, pojedynczych etykiet albo krótkich komunikatów. Gdy jednak trzeba przetworzyć cały ciąg bardziej dokładnie, wchodzą do gry wyrażenia regularne i wtedy warto zmienić sposób myślenia o zamianie. To właśnie tam zaczyna się prawdziwa użyteczność tej metody.
Kiedy lepszy jest wzorzec regularny
Wyrażenie regularne daje większą precyzję, bo pozwala opisać nie konkretny wyraz, ale cały schemat. Dzięki temu można zamieniać wszystkie spacje, usuwać znaki specjalne, poprawiać format numerów albo reagować na różne warianty zapisu tej samej treści.
const tekst = 'Nowy kurs JavaScript';
const slug = tekst.replace(/\s+/g, '-').toLowerCase();
console.log(slug); // nowy-kurs-javascriptW tym przykładzie `\s+` oznacza jedną lub więcej białych znaków, a flaga `g` sprawia, że zamiana obejmuje wszystkie dopasowania. To jest dużo wygodniejsze niż ręczne iterowanie po stringu, zwłaszcza gdy źródłowy tekst pochodzi z formularza, CMS-a albo importu danych.
| Flaga | Znaczenie | Praktyczny efekt |
|---|---|---|
g |
global | Zamienia wszystkie dopasowania, a nie tylko pierwsze |
i |
ignore case | Nie rozróżnia wielkości liter |
m |
multiline | Traktuje wiele linii jako osobne wiersze dopasowań |
Jeśli używasz regexu, pamiętaj też o znakach specjalnych. Kropka, nawiasy, nawiasy kwadratowe czy gwiazdka nie oznaczają już zwykłych znaków, tylko elementy składni. To przydatne, ale łatwo przez to przypadkiem dopasować coś szerszego, niż planowałeś. Kiedy wzorzec zaczyna być zbyt prosty na samą zamianę jednego słowa, przydaje się druga forma `replace()` z funkcją.
Funkcja jako drugi argument daje pełną kontrolę
Drugi argument nie musi być gotowym tekstem. Może być funkcją, która zostanie wywołana dla każdego dopasowania. To świetne rozwiązanie, gdy wynik zależy od treści fragmentu, jego pozycji albo dodatkowego warunku.
const cena = 'Cena: 19.99';
const wynik = cena.replace(/(\d+)\.(\d{2})/, (match, zl, gr) => {
return `${zl},${gr} zł`;
});
console.log(wynik); // Cena: 19,99 złW tym przykładzie funkcja rozbija dopasowanie na części i składa je ponownie w lokalnym formacie. Tak samo można maskować dane, zmieniać kolejność elementów, warunkowo poprawiać wielkość liter albo budować bardziej złożone formaty bez dodatkowych pętli.
To rozwiązanie jest szczególnie wygodne, gdy tekst ma kilka wariantów wejściowych, ale efekt końcowy musi być spójny. W takich przypadkach zwykły string jako zamiennik bywa zbyt sztywny, a funkcja pozwala zareagować na każdy match osobno. Z tego już prosto przejść do porównania `replace()` z `replaceAll()` i do kilku pułapek, które pojawiają się najczęściej.
Kiedy wybrać replaceAll i na co uważać
Jeśli chcesz podmienić wszystkie wystąpienia zwykłego tekstu, `replaceAll()` bywa po prostu wygodniejsze. Nie wymaga budowania regexu tylko po to, żeby zamienić kilka powtórzeń tego samego słowa. W nowoczesnym kodzie front-endowym to często najbardziej czytelna opcja.
| Sytuacja | Lepszy wybór | Dlaczego |
|---|---|---|
| Jedno konkretne dopasowanie | replace() |
Najprostszy i najszybszy zapis |
| Wszystkie wystąpienia zwykłego tekstu | replaceAll() |
Bez regexu i bez dodatkowych flag |
| Wzorzec z warunkami | replace(/.../g, ...) |
Pełna kontrola nad dopasowaniem |
| Dynamiczna transformacja | replace(..., fn) |
Możesz reagować na każdy match osobno |
- Nie zakładaj, że `replace()` zmieni cały string, jeśli podajesz zwykły tekst.
- Nie zapominaj o przypisaniu wyniku do zmiennej.
- Nie używaj regexu zbyt szeroko, jeśli chodzi tylko o prostą podmianę słowa.
- Nie myl literalnego tekstu z wzorcem regex, bo znak `.` czy `*` działa wtedy zupełnie inaczej.
- Nie pomijaj `g`, jeśli zależy ci na wszystkich dopasowaniach w regexie.
Najkrócej: `replaceAll()` upraszcza zamianę wielu identycznych fragmentów, a `replace()` z regexem i funkcją daje więcej kontroli. W praktyce wybór zależy od tego, czy potrzebujesz prostoty, czy precyzji. Zostaje jeszcze pytanie, jak wykorzystać to sensownie w realnych projektach webowych, bo tam widać największą różnicę.
Jak używam zamiany tekstu w projektach webowych
W projektach webowych najczęściej używam tej metody do porządkowania danych jeszcze przed ich zapisaniem albo wyświetleniem. To może być usunięcie nadmiarowych spacji, zamiana separatorów w slugach, ujednolicenie wielkości liter w filtrach albo zamaskowanie części danych w podglądzie zamówienia. Takie drobne operacje robią ogromną różnicę w spójności interfejsu.
Przy e-commerce i SEO szczególnie dobrze sprawdza się normalizacja nazw kategorii, produktów i adresów przyjaznych użytkownikowi. Jeśli adres URL ma być czytelny, `replace()` często wystarcza do zamiany spacją na myślnik, usunięcia niechcianych znaków i uporządkowania tekstu wejściowego. Jeśli jednak treść jest złożona, ma wiele wyjątków albo wymaga pełnej walidacji, sama zamiana nie wystarczy i lepiej dołożyć osobny etap przetwarzania.
To właśnie tu widać praktyczną granicę tej metody: jest szybka, lekka i bardzo użyteczna, ale nie jest uniwersalnym narzędziem do „naprawiania” tekstu. Gdy traktuję ją jako precyzyjny element większego procesu, działa przewidywalnie i bez zbędnego kodu. I to jest chyba jej największa zaleta w codziennym programowaniu front-endowym.
