JavaScript/jQuery - praktyczny przykład użycia metody replace()

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ę.

Kurs HTML i JavaScript - praktyczne projekty

4.7

(29 ocen)

Poznaj zaawansowane możliwości HTML5 i JavaScript. Wykorzystaj je by tworzyć atrakcyjne i nowoczesne witryny. Dowiedz się więcej

Jak wygląda problem?

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

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: zł. Dzięki temu mamy już dodatkowy znacznik, który pozwoli nam wprowadzić inne style CSS do tego elementu.

Nowoczesne aplikacje klienckie w JavaScript

Zobacz kurs

Jak zostać Full Stack Developerem

Zobacz kurs

Kurs Programowania w jQuery

Zobacz kurs

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ń.