Strefa rozwoju osobistego i nowinek ze świata technologii & IT | blog strefakursów.pl
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ę.


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.


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


Kompleksowe szkolenie dla JavaScript Front-end Developera
Users icon 9601 uczestników
Watch icon 62 godziny
Video icon 538 wykładów

Zostań developerem najpopularniejszego języka współczesnej sieci Web. Zdobądź niezbędne umiejętności i pracuj w niezwykle dynamicznej dziedzinie. Dowiedz się więcej

Interesują Cię nowe technologie?

Zapisz się do naszego newslettera!