Logo
Hamburger icon Close icon
Go to top
WYNIKI WYSZUKIWANIA:
JavaScript/jQuery - praktyczny przykład użycia metody replace()

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
star star star star quarter-star
(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:


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

Nowoczesne aplikacje klienckie w JavaScript

Nowoczesne aplikacje klienckie w JavaScript

Zobacz kurs Arrow
Jak zostać Full Stack Developerem

Jak zostać Full Stack Developerem

Zobacz kurs Arrow
Kurs Programowania w jQuery

Kurs Programowania w jQuery

Zobacz kurs Arrow

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



Opublikowane 30 marca 2016 r. w kategorii: Programowanie


ŚCIEŻKA KARIERY
Users icon 13130 uczestników
Watch icon 79 godzin
Video icon 708 wykładów

Twórz atrakcyjne i funkcjonalne strony internetowe z użyciem nowoczesnych technik. Opanuj kluczowe podstawy, niezbędne narzędzia i zacznij tworzyć wspaniałe strony! Dowiedz się więcej

Interesują Cię nowe technologie?

Zapisz się do naszego newslettera!