Wstęp

W tym krótkim artykule chcę ci pokazać prosty ale myślę, że praktyczny przykład użycia metody replace(). Pamiętaj o tym, że jest to standardowa metoda języka JavaScript i nie potrzebuje ona żadnych dodatkowych bibliotek. jQuery w moim przykładzie jest tylko dodatkiem, który ma za zadanie ułatwić pracę.

Jak wygląda problem?

Podczas pracy nad front-endem natrafiłem na konieczność sformatowania ceny. Zgodnie z projektem powinna ona wyglądać tak:

Format ceny - metoda replace w JavaScript

Generalnie chodzi o to aby wartość ceny miała większy tekst niż „zł”. Problem polega na tym, że obydwa elementy ceny tworzą jedną całość – są jednym fragmentem tekstu. Od frontu wygląda to tak:

<div class="main-price"> {$product->price} </div>

Jak widać, ceny wyrzucana jest na front za pomocą jednej zmiennej, nie ma oddzielnego symbolu waluty i z różnych powodów nie ma możliwości zmodyfikowania zaplecza witryny. Nie da się także za pomocą CSS odwołać do wybranych znaków we fragmencie tekstu. Dlatego musimy znaleźć inne rozwiązanie.

Rozwiązanie

W naszym wypadku musimy otoczyć „zł” dodatkowym znacznikiem, który pozwoli nam ten element odrębnie sformatować. Sam znacznik nie już większego znaczenia: może być to div, span itp. I właśnie do tego celu użyjemy metody replace().

$('. main-price).html(function(i,el) { return el.replace('zł', ''); });

Warto zwrócić uwagę na kilka rzeczy: metoda html() użyta została aby zmodyfikować zawartość div’a z ceną. Natomiast replace() użyto po to aby zawartość podmienić. Czyli tam gdzie znajdowało się oryginalnie ‘zł’ wstawiony został nowy element : . Dzięki temu mamy już dodatkowy znacznik, który pozwoli nam wprowadzić inne style CSS do tego elementu.

Uwagi

Rozwiązanie pokazane powyżej w pewnych sytuacjach może być skuteczne jednak nie zawsze jest to optymalny wybór. Przede wszystkim przetwarzanie ciągów znaków za pomocą replace() w niektórych sytuacjach może mieć spory wpływ na wydajność. W zdecydowanej większości wypadków lepiej było by takie rzeczy wykonać od zaplecza i po prostu oddzielnie wyprowadzić ceną oraz walutę. Oczywiście nie zawsze mamy na to wpływ i czasami jesteśmy zmuszeni do użycia opisanych wcześniej rozwiązań.