Jak podmienić tekst w Javascript? Poznaj 3 proste sposoby
W tym wpisie dowiesz się, jak podmienić tekst w Javascript. Opowiem Ci o moich sposobach na to, żeby zastąpić wszystkie wystąpienia danego ciągu znaków i się przy tym za mocno nie napocić. 😎
Załóżmy, że pracujesz nad sklepem internetowym i chcesz dynamicznie generować ścieżkę do produktu, korzystając z jego nazwy. Twój nowo utworzony url ma przyjmować format nazwa-produktu, co sprowadza się do tego, że musisz zamienić wszystkie spacje na myślniki.
Oto opcje, które masz do dyspozycji:
1. replace() z wyrażeniem regularnym
Metoda replace() szuka w stringu utworzonego za pomocą wyrażenia regularnego ciągu znaków, a potem go podmienia.
Nasz przykład wyglądałby następująco:
Wyrażenie regularne można też utworzyć w inny sposób. Ten sam efekt da się osiągnąć za pomocą przy użyciu konstruktora. Patrz niżej.
Aby metoda replace() zastępowała wszystkie wystąpienia podanego wzorca, musisz pamiętać, żeby ustawić flagę globalną („g”). W przeciwnym razie konsola zwróci Ci błąd.
2. kombinacja metod split() i join()
Jednym z najpopularniejszych sposobów do rozwiązania naszego problemu jest dzielenie, a potem łączenie tablicy.
Sprawdźmy, jak to działa:
Krok 1. dzielimy stringa na kawałki w miejscu wystąpienia szukanego ciągu znaków,
Nazwa naszego produktu zostaje podzielona na kawałki, które lądują tablicy: [’blue', 'mom', 'jeans'].
Krok 2. łączymy uzyskane kawałki, umieszczając między nimi docelowe znaki.
Na koniec [’blue', 'mom', 'jeans'].join('-') tworzy z poszczególnych elementów tablicy jednego stringa. Jednocześnie dla każdego z kawałków dodaje podany ciąg znaków. W naszym przykładzie jest to '–'.
3. replaceAll() 🥳
Wreszcie metoda, której nazwa mówi sama za siebie. Znajdź wszystkie miejsca, gdzie występuje szukany ciąg znaków i zamień je na podany przeze mnie.
Spójrzmy, jak elegancko można uzyskać ten sam efekt co wyżej:
Ta opcja wydaje się najbardziej intuicyjna, jednak musisz mieć na uwadze, że nie wszystkie przeglądarki ją obsługują.
Hmm ciekawe, które… 🤔
Źródło: giphy.com
TAK, zgadłaś! Chodzi o Internet Explorer. Chociaż nie tylko. Resztę z nich zobaczysz na caniuse.
Dlatego, jeśli chcesz skorzystać z replaceAll i musisz wspierać np. IE, to konieczne będzie użycie czegoś takiego jak polyfill, czyli “małej biblioteki”, która pomoże przeglądarce zrozumieć nieobsługiwaną natywnie metodę.
Polyfill znajdziesz wśród bibliotek dostępnych na platformie github, np. tutaj.
metoda z *, czyli replace() ze stringiem 🌟
Podobnie jak w przykładzie z wyrażeniem regularnym szukamy ciągu znaków i podmieniamy na zadany. Jednak w tym przypadku zamieniamy jedynie pierwszy znaleziony element, a nie wszystkie wystąpienia.
Podsumowanie
Dzielenie i łączenie tablicy daje pożądany efekt, ale moim zdaniem jest trochę zagmatwane i przekombinowane, jak na to, co chcemy uzyskać. Do tak prostej czynności potrzebujemy korzystać z 2 metod i zmieniać typ naszego stringa.
Podobne odczucie pojawia się u mnie przy podawaniu szukanego ciągu znaków jako wyrażenia regularnego. Dodatkowo nie da się dynamicznie wygenerować wyrażeń regularnych, bo znaki specjalne wyrażeń regularnych muszą być poprzedzone znakiem espace (\). Dlatego według mnie najlepszym rozwiązaniem jest korzystanie z metody replaceAll().
Mam nadzieję, że już wiesz jak podmienić tekst w Javascript i jak najszybciej samodzielnie wykorzystasz omówione sposoby w praktyce. Powodzenia!🤞
PS. Który ze sposobów najbardziej Ci się podoba? A może znasz jakieś inne metody zastępowania wszystkich wystąpień danego ciągu znaków w tekście? Koniecznie podziel się nimi w komentarzu!
