JavaScript: Metoda .replace
w Praktyce
9 godz. 47 min · JavaScript · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe i Domkniecia
- Format danych JSON oraz praca z AJAX
- Cookies
- Wyrazenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilosc sztuczek i dobrych praktyk
- I wiele, wiele wiecej!
Witaj w kursie JavaScript w Praktyce!
W pierwszym rozdziale tego kursu poznasz bardzo dokładnie koncepcje programowania zorientowanego obiektowo. W jednej z lekcji, omówimy wszystkie z nich na przykładzie pseudo-kodu, niezwiązanego bezpośrednio z językiem JavaScript. Dzięki temu zrozumiesz, jak realizowane jest programowanie obiektowe w wielu popularnych językach programowania. Dowiesz się czym jest klasa, obiekt, instancja, właściwości, metody, a także zrozumiesz takie pojęcia jak dziedziczenie, polimorfizm, abstrakcja czy enkapsulacja. Następnie przejdziemy już do języka JavaScript i do zrozumienia tego, w jaki sposób powyższe koncepcje są w nim zaimplementowane. Język ten nie jest bowiem w 100% klasycznie obiektowy, jak np. język PHP. Co jednak bardzo istotne, JavaScript implementuje tzw. dziedziczenie prototypowe, którego bardzo dogłębne zrozumienie, gwarantuje zrozumienie całego języka JavaScript. Dowiesz się zatem czym są konstruktory i jak je tworzyć, a także jak korzystać z prototypu funkcji. Dzięki temu będziemy mogli wykorzystać obiektowość do własnych celów, co później w praktycznych przykładach uczynimy.Na przestrzeni kilku lekcji zobaczysz krok po kroku, jak w języku JavaScript zaimplementować dziedziczenie wielokrotne. Taka wiedza absolutnie otwiera oczy na zależności rządzące obiektami w tym języku. Dowiesz się również jak rozszerzać wbudowane konstrukcje języka JavaScript czy Obiektowego Modelu Dokumentu, a także kiedy powinniśmy to robić. Omówimy problemy, jakie mogą się pojawiać przy korzystaniu ze słowa kluczowego this, a także sposoby ich rozwiązania. Poznasz 3 bardzo ważne metody funkcji: call, apply i bind.JavaScript ma wiele specyficznych cech, a jedną z nich są tzw. domknięcia. W jednym z rozdziałów zobaczysz, do czego one służą i kiedy powinniśmy z nich korzystać. Dopełnimy tym również wiedzę związaną z programowaniem obiektowym i tzw. prywatnością.Rozdział o obiektowości został celowo umieszczony na samym początku kursu, gdyż zrozumienie tych koncepcji pozwala patrzeć zupełnie inaczej na wszystkie pozostałe. Po tym rozdziale przejdziemy do omówienia bardzo popularnego, lekkiego formatu wymiany danych JSON. Dowiesz się jak wygląda składnia tego formatu, a także jak współpracuje on z językiem JavaScript.Następnie przejdziemy do bardzo ekscytującego tematu, jakim jest technologia AJAX. Dzięki niej możemy wysyłać zapytania do serwera i pobierać dane, bez przeładowywania witryny. Do zrozumienia AJAXa niezbędne jest jednak rozumienie działania protokołu HTTP, na którym opiera się sieć www. Z tego powodu, jedna z lekcji została w 100% poświęcona HTTP i dowiesz się z niej jak wysyłane są żądania i odpowiedzi, a także tzw. nagłówki, które będą dla nas niezwykle istotne. Chwilę później omówimy również bardzo ważne mechanizmy: Same- origin policy i CORS, które blokują możliwość wysyłania żądań AJAX do pewnych serwerów. Kiedy już będziesz rozumiał te niezwykle istotne koncepcje, przejdziemy do napisania pierwszego kodu, wysyłającego asynchroniczne żądanie do serwera. Następnie dowiesz się jak wysyłać, a także odbierać dane z serwera, umieszczać je na stronie oraz śledzić postęp zarówno wysyłania, jak i pobierania danych.W tym rozdziale na przestrzeni kilku lekcji napiszemy swoją własną bibliotekę AJAX, która pozwoli w niezwykle łatwy sposób wysyłać i odbierać dane. Skorzystamy w niej już w kolejnej lekcji, gdzie zobaczysz, jak wysłać wiadomość e-mail z użyciem AJAX i PHP po stronie serwera. Gotowy skrypt, będziesz mógł umieścić na własnej stronie internetowej. Na zakończenie tego rozdziału omówimy również dokładnie niezwykle sprytną technikę o nazwie JSONP, które pozwala wysyłać tzw. żądania “cross-origin”. Przekonasz się dlaczego taka technika powstała i jak współpraca klienta i serwera potrafi obejść zabezpieczenia przeglądarek.Kolejnym tematem omówionym w kursie będą Cookies, czyli tzw. ciasteczka. Dowiesz się czym są, w jakim celu istnieją, a także jak są ustawianie przez serwer. Co ciekawe, również z poziomu języka JavaScript będziemy mieli do nich dostęp, a zatem zobaczysz jak je ustawiać i odczytywać. Na tym etapie przyda nam się wiedza zdobyta w lekcji o protokole HTTP.W kursie znajdziesz również rozdział poświęcony w 100% wyrażeniom regularnym. To mechanizm języka, który pozwala dopasowywać tekst do definiowanych przez nas wzorców. Wyrażenia regularne potrafią być bardzo zaawansowane i odstraszać, dlatego rozłożymy je na czynniki pierwsze, byś dokładnie je zrozumiał. Na przestrzeni wielu lekcji dowiesz się jakie są specjalne symbole wykorzystywane przy wyrażeniach regularnych, czym są kwantyfikatory, kotwice czy np. grupowanie. Następnie przejdziemy do wykorzystania wyrażeń regularnych w języku JavaScript. Poznasz zarówno metody obiektu RegExp jak i te dostępne na obiekcie String. Dzięki nim będziemy mogli wyszukiwać np. adresów e- mail w podanym tekście, usuwać je lub zamieniać na coś innego. Jako praktyczny projekt, stworzymy “Antybluzgacz”. Wykorzystamy do tego celu programowanie obiektowe, a sama aplikacja będzie pozwalała filtrować wpisywany przez użytkownika tekst wiadomości i wyłapywać w nim niecenzuralne słowa. Wszystkie z nich zamienimy na przypadkową reprezentację znaków, np. $#!@%^. Ten projekt pokaże Ci nie tylko jak korzystać z wyrażeń regularnych, ale także jak profesjonalnie pracować z kodem JavaScript.W przedostatnim rozdziale tego kursu znajdziesz lekcje związane z dobrymi praktykami pracy. Omówimy tzw. “strict mode” języka JavaScript, zagadnienia związane z minifikacją i konkatenacją skryptów, sprawdzaniem poprawności pisanego kodu oraz delegacją zdarzeń DOM.Na końcu kursu znajdziesz 10 krótkich lekcji z serii Tips & Tricks, które przybliżą Ci wiele ciekawych konstrukcji języka JavaScript, a także technik na rozwiązanie różnych problemów. Zobaczysz np. jak wczytać obrazy w tle czy jak wyświetlić na pasku tytułowym witryny migające powiadomienie.Podsumowując, kurs ten jest dopełnieniem wiedzy z zakresu języka JavaScript i Obiektowego Modelu Dokumentu z kursu “JavaScript od Podstaw”. Poprzedni kurs nie jest wymagany, lecz jego przerobienie z pewnością pozwoli dużo lepiej przyswoić wiedzę z tego kursu, gdyż były one przygotowywane równocześnie. Oba te materiały, pozwolą od zera, wskoczyć na naprawdę wysoki poziom rozumienia języka, a także dobrych praktyk pisania kodu.
Kurs JavaScript w Praktyce to między innymi:
- Omówienie koncepcji OOP
- Dziedziczenie prototypowe
- Domknięcia
- Format danych JSON
- Praca z AJAX
- Cookies
- Wyrażenia regularne
- “strict mode” w JavaScript
- Praktyczne projekty
- Niezliczona ilość sztuczek i dobrych praktyk
- I wiele, wiele więcej!
Dla kogo jest ten kurs?
Do tego kursu mogą jednak przystąpić wszystkie osoby, które znają już podstawy języka HTML, CSS i JavaScript i chcą poszerzyć swoją wiedzę, a także spojrzeć zupełnie inaczej na ten język.
W tej lekcji pokażę ci jak możemy korzystać z javascriptowej funkcji replace która jest dostępna na
stringach poprzez string prototype.
Jak możemy za jej pomocą zamieniać tekst na jakiś inny tekst.
Najprostsze użycie tej funkcji jest takie że na jakimś tekście ją wywołujemy i mówimy co tam chcemy zamienić.
Mamy tutaj takiego fajnego kotka i zauważa że jest to obrazek który atrybut src ma ustawione na logo
kropka svg.
Dzięki temu jeśli sobie powiększę stronę to cały czas jest tutaj super ostre.
Natomiast co w sytuacji jeżeli na naszej stronie nic nie jest wspierane z svg.
Ja często robię tak że podłączam sobie do strony właśnie domyślnie wszystko jako S V svg a potem w javascript sprawdzam
czy svg jest wspierane.
Jak to zrobić.
Nie będę już pokazywał ale to są dosłownie dwie linijki kodu.
Jeżeli svg nie jest wspierane to chcę na wszystkich moich obrazkach z svg zamienić to rozszerzenie na
png.
Mam przygotowany obrazek również z png czyli jeżeli teraz tutaj przejdę na koniec i to zamienię na png
to ten obrazek został zamieniony na png został pobrany bo również go przygotowałem.
Natomiast teraz jeżeli powiększam.
Oczywiście nie tutaj tylko tutaj.
Jak widzisz to już wyraźnie traci na jakości niemniej jednak działa i teraz pokażę ci jak możemy to
zamienić.
Na razie bez wyrażeń regularnych mam tutaj ten obrazek i będę chciał zamienić jego atrybut src.
Czyli jeżeli svg nie jest wspierane tutaj byśmy to sprawdzili to odwołamy się do img src i nadpiszemy ten
atrybut.
Tutaj mógłby być set attribute i co chcemy zrobić otóż pobierzemy img src czyli to jest string.
Dokładnie ten i na nim wykonamy metodę replace mówiąc w zamień kropka svg na kropka png teraz po odświeżeniu
od razu będziemy tutaj mieli logo png.
No i wszystko działa jak należy więc replace może przyjmować tekst jaki chcemy znaleźć w tym stringu
oraz tekst na jaki chcemy zamienić.
Niemniej jednak nam chodzi tutaj o wyrażenie regularne więc teraz chcę Ci to pokazać.
Mam tutaj na stronie przygotowany taki tekst jeżeli pisałeś kiedyś w markdown to wiesz że możemy tak
coś pogrubić czyli piszemy dwie gwiazdki jakiś tekst dwie gwiazdki i chciałbym to zamienić na b.
Jak to zrobić pokażę ci za sekundę więc najpierw może przygotujmy sobie tutaj wyrażenie regularne albo
wpiszemy go bezpośrednio w replace.
Czyli chce się odwołać do p.
text content na tym wykonamy replace.
Ale żeby to odmienić tutaj to będę chciał nadpisać to wszystko czyli p text content albo innerHTML
to się za moment przyda.
Chcę nadpisać tym co zostanie zwrócone czyli pobieramy p text content cały ten tekst i chciałbym znaleźć
wszystkie gwiazdki i je odpowiednio zamienić.
No i co jest ciekawe to właśnie metoda replace.
Może tutaj zamiast tekstu przyjmować wyrażenie regularne możemy je sobie wpisać.
Czyli chce znaleźć wszystkie gwiazdki ale wiesz że w wyrażeniu regularnym gwiazdka oznacza coś specjalnego.
To znaczy możemy napisać kropka gwiazdka czyli tutaj zero lub więcej razy coś może wystąpić.
Dlatego musimy im zrobić escape.
W ten oto sposób czyli mówimy teraz znajdź wszystkie dwie gwiazdki globalnie i zamień je na tak jak tutaj
zmienialiśmy na png np. na takie kreski pokaże ci w jaki sposób to będzie działać.
No i zobacz na kreski zostało to zamienione gdyby nie było flagi g.
Jest to bardzo istotne.
Zobacz to tylko tutaj na początku pierwsze dwie gwiazdki zostały zamienione a te już nie.
Czyli mam nadzieję że to rozumiesz.
Tak sobie to dopasowaliśmy.
Teraz chciałbym jednak zrobić coś innego przejdziemy do regexr i ten sam tekst który mam tutaj rzuciłem w regexr
i zobacz wyszukuje dwie gwiazdki.
Potem dowolne znaki raz lub więcej i tutaj jak widzisz mamy nowy non greedy i zaraz ci pokażę dlaczego.
I znowu dwie gwiazdki to sobie zgrupowałem.
Jeżeli nie będzie tego to jak widzisz wszystko zostanie nam tutaj zaznaczone w lekcji o greedy i o tym
mówiłem.
Więc możemy sobie to tak zaznaczyć i teraz w tej grupie będziemy mieli to co jest wewnątrz czyli podświetliliśmy
na niebiesko wszystko ale w grupie czyli pod dolar jeden będziemy mieli to co jest wewnątrz i pamiętasz że
jest taki panel jak substitution że możemy sprawdzić co jest dolar jeden i napiszmy sobie to w ten sposób czyli
wszystko co jest niebieskie poprzez ten panel będzie to zamienione podobnie przez funkcję replace w javascript.
Więc jeżeli tutaj napiszę coś takiego to znaleźliśmy globalnie bo mamy flagę g.
Wszystko co jest pomiędzy dwie gwiazdki cokolwiek dwie gwiazdki i zmieniliśmy to na jak widzisz b i
koniec b bo tutaj stworzyłem grupę to samo teraz będę chciał zrobić u nas w naszym przykładzie czyli
takie wyrażenie całe sobie skopiuje teraz to wykomentuje i ponownie tutaj napiszę tutaj to wyrażenie regularne.
Chcemy globalnie i to co tam będzie chcemy zamienić.
No właśnie.
Tak samo jak tam.
Na b.
I teraz zapytasz dlaczego.
Dlaczego mamy tutaj dostęp do dolar 1.
Otóż właśnie w tym miejscu kiedy pokazałem ci przechodząc tutaj możesz sobie przejść do reference.
Do substitution wszystkie te znaczki.
Co one oznaczają znajdziesz to w lekcji gdzie o tym mówiłem.
To mówiłem o tym że one będą dostępne w javascript to co widać tutaj to jest dokładnie to samo.
To znaczy że tylko w funkcji replace jest to dla nas dostępne i tutaj s1.
To będzie pierwsza grupa która została znaleziona s2 to kolejna grupa czyli dokładnie to o czym już w
tym kursie mówiłem.
I tutaj możesz korzystać ze wszystkich tych znaczków które widzisz w tym miejscu nie ma żadnego problemu.
Dzięki temu na naszej stronie te gwiazdki powinny zostać odpowiednio zamienione tak jak pokazałem to
tutaj dokładnie w ten sam sposób.
No i coś nam poszło nie tak.
Nie mamy błędów w konsoli więc sprawdźmy co mogło się nie udać.
Tutaj napisałem l z małej litery to był błąd.
Ok.
I teraz wszystko działa.
Jak widzisz stworzyliśmy sobie taki prosty markdown.
Czyli zostało to zamienione na b.
Jak widzisz jak najbardziej działa dzięki temu że było globalnie to tutaj również zostało to pogrubione.
Podsumowując to co do tej pory wiemy funkcja replace może albo przyjmować string który chcemy znaleźć
i zamienić na inny.
Albo może przyjmować wyrażenie regularne.
I tutaj możemy na coś innego to zamienić korzystając również ze specjalnych znaczków które są dla nas
dostępne.
Natomiast ciekawostka i coś co chce ci pokazać jest taka że zamiast drugiego parametru jako string możemy
tutaj podać funkcję bo co gdybym chciał to wszystko znaleźć ale tekst który był wewnątrz b żeby zamienić
na duże nie mogę tu napisać to upper case bo jest to tylko zwykły string więc będę chciał Ci pokazać jak
zrobić to w funkcji i może sobie to co tutaj mamy skopiujemy wykomentuje i wstawię poniżej czyli teraz zamiast
tego ustaliwy funkcję i to co ta funkcja zwróci zostanie użyte dla każdego z tych znalezionych znaków
czyli dokładnie tak jak przed momentem to było użyte dla każdej takiej grupy która została znaleziona.
Dla każdego jakby strzału czy do tego co jest tutaj na niebiesko i podobnie będzie z funkcją.
Ona będzie jakby wykonana dla każdego z takich znaczeń to co ona zwraca jak wspomniałem zostanie użyte czyli
gdyby na szybko gdybym tutaj zwrócił hello.
Zobaczmy to na naszej stronie wszystko co znajdziemy zostanie zamienione na hello i teraz ta funkcja
przyjmuje wiele ciekawych parametrów o których chcę teraz chwilkę powiedzieć.
Pierwszy parametr to będzie trafiony tekst czyli match może zróbmy sobie tutaj console log i będziemy po
kolei na to patrzeć.
Przejdźmy na konsoli.
Jak widzisz to co zostało trafione w tym narzędziu.
To co jest tutaj podświetlane na niebiesko.
Jak widzisz tak to wygląda teraz drugi parametr.
On tutaj może być i będą to poszczególne grupy czyli tak jakby dolar 1 dolar 2 itd nazwijmy go sobie
p1 i zerknijmy co jest w p1.
Zobaczmy jak widzisz to co było w grupie czyli dokładnie to samo co dolar 1 jeżeli mielibyśmy więcej
grup mielibyśmy dolar 2 itd to musielibyśmy tutaj napisać p2 itd.
Natomiast jest tutaj jeszcze więcej parametrów i skoro pomiędzy nimi czyli pomiędzy pierwszym a tymi
ostatnimi może być ich dowolna ilość to trzeba zapamiętać że zawsze ten pierwszy i dwa ostatnie będą
takie same czyli teraz może to być p2 w naszym przypadku tego nie było więc będzie to undefined.
Zobaczmy chociaż widzisz coś tutaj się nam pokazało nie jest to undefined dlatego że został tutaj przyjęty
kolejny parametr o którym chcę powiedzieć za moment jeszcze do tego wrócę.
On nazywa się offset i napiszemy tutaj offset.
Oczywiście dwa f jedno s.
Jak widzisz 12 czyli jakby pierwsze nasze trafienie które znaleźliśmy było po dwunastu znakach czyli
wcześniej było dwanaście znaków to jest tak jakby index.
A drugie które mieliśmy dalej było po 71 znakach czyli ten parametr jest offset natomiast pamiętaj że
to nie zawsze będzie trzeci parametr.
Jeżeli byśmy nie mieli tutaj tej grupy czyli dolar 1 to to byłby drugi parametr oraz pokaże co z tym
zrobić.
I teraz jeszcze jeden parametr jest to string wyświetlę go sobie tutaj
czyli jest to cały string na którym pracowaliśmy no i teraz o co chodzi.
Tak jak wspomniałem jeżeli nie będziemy mieli grupy to będą trzy takie parametry jeżeli mamy grupę to
tu może być parametry tak jakby dolar 0.
To może być kolejny i kolejny.
Czyli aby się odwołać tylko do tego co tutaj trafiliśmy czyli dolar 1 dolar 2 itd.
To będziemy musieli sobie z tych argumentów które tutaj są wyciąć pierwszy wyciąć dwa ostatnie a wziąć
to co jest pomiędzy jeżeli tego nie będzie w pierwszej dwa ostatnie to nie będziemy mieli nic.
Teraz pokażę ci jak to zrobić ale przypuszczam że już się domyślasz bo w tym kursie już to robiliśmy.
Stworzy zmienną capture czyli przechwycone i odwołam się do arguments czyli do tego wszystkiego co
tutaj jest więc w zasadzie jak widzisz w ogóle nie musielibyśmy tego tutaj podawać bo nic nam z tego
ale ja to zostawię abyś wiedział o co chodzi.
Arguments przechowuje wszystkie argumenty które tutaj jak wiesz mogą się zmieniać.
I teraz będziemy chcieli pożyczyć sobie od tablicy jej metodę slice i wyciąć na argumentach od 1 czyli
oprócz pierwszego do minus 2 czyli wszystko pomiędzy od 1 do minus dwa ostatnie czyli to co jest pomiędzy.
Zerknijmy sobie teraz do zmiennej captured i
jak widzisz mamy tutaj to jest treść mark down i tutaj znów czyli jakby to co zostało znalezione w tej grupie
dokładnie to co jest tutaj zero.
Jeżeli mielibyśmy więcej grup to tutaj zostałoby nam zwrócone więcej tych elementów.
Dzięki temu do naszej tablicy capture mogę się odwołać tutaj do zero i to będzie tak jakby dolar 0 a capture
1 to tak jak dolar 1 itd.
Czyli masz taki przepis jak to zrobić i teraz to co zwróci zostanie tam podstawione czyli ja chciałbym
zwrócić tak jak wcześniej to robiliśmy.
B czyli pogrubienie.
Do tego chciałbym dodać captured zero.
Następnie to upper case bo jest to string więc mamy na nim taką metodę i do tego znowu będę chciał dodać
zamykające b.
Teraz nam to powinno zadziałać zerknijmy.
Jak widzisz działa tak jak wcześniej ale dzięki temu mogliśmy sobie to pogrubić tzn powiększyć wielkość
liter poprzez to upper case i inne dowolne rzeczy w tej funkcji moglibyśmy również zrobić tutaj na koniec
jeszcze abyś widział jak co wygląda to zrobię ci console log capture.
I console log arguments.
Żebyś wiedział na czym operuje.
Arguments będą wszystkie argumenty a capture tylko te wycięte zobaczmy raz jeszcze.
Jak widzisz wygląda to w ten sposób możesz się temu na spokojnie przyjrzeć.
Widzieliśmy pierwszy widzieliśmy dwa ostatnie a wzięliśmy tylko to co było pomiędzy i możesz to zobaczyć
tutaj w tej tablicy poniżej.