Trascrizione: (click per espandere)

salve a tutti in questo video parlerò
delle espressioni regolari o regular
expression cosa è un'espressione
regolare l'espressione
regolare è un insieme di caratteri
alfanumerici che chiameremo
pattern è usato per cercare
corrispondenze dentro a un testo per
esempio se io voglio cercare la lettera
o dentro a una frase quindi magari una
stringa e se cerco la lettera o e questa
espressione regolare mi dice sì l'ho
trovato no non l'ho trovata sì ne ho
trovate 3 o ne ho trovate quattro sì
l'ho trovata vuoi sostituirla con
qualcos'altro
le espressioni regolari sono abbastanza
lunghe da spiegare e complesse e non
posso farlo qui in questo video vi metto
un link in descrizione dove potete
trovare tutto il materiale che vi serve
per imparare ad usare le espressioni
regolari
in questo video vi faccio vedere qualche
esempio vi do qualche nozione di base
un'altra cosa le espressioni regolari
non sono una cosa che funziona solo con
javascript è un qualcosa di
esterno che ogni programma linguaggio di
programmazione adotta per eseguire
appunto ricerca e nei testi andiamo a
vedere come si scrivono espressione
regolare allora intanto io comincio col
creare una stringa a cui poi io andrò a
applicare questa espressione regolare
quindi la stringa la chiamerò testo e
vado a prendermi il contenuto del mio
paragrafo display display
ecco qui normalmente mi avete sempre
visto usare questo questo comando qui
chiamiamolo con il simbolo di
assegnazione e poi la stringa che voglio
andare a visualizzare in questo caso io
ho già una stringa dentro al mio paragrafo
voglio salvare questa stringa dentro a
questa variabile e faccio in questa
maniera
poi vado a a creare il pattern quindi
chiamiamolo pattern chiamo pattern 0 e e creo
la mia espressione regolare
l'espressione regolare può essere creata
in due maniere
questa è la maniera letterale si chiama
quindi slash
diciamo che voglio cercare la lettera o
dentro al mio testo quindi metto il
metrò qui che sarebbe il pattern e poi
chiudo con un altro slash
ecco questa è un'espressione regolare
creata usando il metodo letterale c'è
un'altra maniera per creare un
espressione regolare alternativa la
chiamo alternativa ed è usando l'oggetto
built in di javascript di regExp
quindi keyword new regExp parentesi tonde e dentro si mette il
pattern che voglio cercare in questo caso
sarebbe o ecco qui queste due sono in
maniere per creare un espressione
regolare normalmente io uso questa ci
sono dei casi in cui si è costretti ad
usare questa comunque vi faccio vedere
qualche esempio voi se potete cercate di
usare questa qui
allora andiamo a vedere come si usano
l'espressione regolari per cercare
questo pattern dentro al mio testo posso
usare delle dei metodi dell'oggetto
regExp per eseguire queste ricerche
questi rimpiazzamenti allora cominciamo
col metodo test il metodo test è un
metodo che mi ritorna vero falso se
trova il pattern una corrispondenza del
mio pattern dentro al testo quindi
andiamo a vedere come funziona console
log
diciamo quindi pattern 0
diciamo che voglio cercare questo pattern
il pattern quindi la lettera o metodo
test e come argomento del metodo test ci
passo il mio testo quindi se se dentro
al mio testo c'è una lettera o mi
ritornerà vero vero eccolo qui perché io
o la mia ho dentro il testo eccola qui
anzi ce ne ho più di una quindi mi
ritorna vero se io avessi cercato
un'altra un'altra pattern proviamo a
vedere non è obbligatorio salvare il
pattern dentro al a una variabile quindi
lo si può scrivere direttamente qui
quindi per esempio io cerco la lettera w
dentro al mio testo mi dice falso perché
io non ho una lettera doppia w dentro al
mio testo le flag le flag sono sono
identificate da una "i" "g" una "m" o una
"ypsilon" la ypsilon è stata introdotta
con ecmascript 6 e sta per sticky non
vela spiegherò perché non è proprio
facilissimo da capire comunque vi
conviene prima
prendere prendere confidenza con le
altre flag e col resto delle espressioni
regolari e poi potete cominciare a
guardare alla ypsilon
come dicevo queste flag vanno aggiunte
al nostro pattern per dire a javascript
ok esegui questa ricerca seguendo a
oltre al pattern anche questa flag ad
esempio la flag sta per
in sensitive quindi vado a dire a
javascript esegui questa ricerca del
mio pattern e non badare se la lettera è
maiuscola o minuscola quindi andiamo a
vedere per esempio un
prendiamo questo qui è diciamo che io
stavo cercando la lettera a
la lettera ha però la scrivo in maniera maiuscolo lui mi dirà
falso però se io specifico la flag "i" in
questa maniera qui lui mi dice vero
perché io al mio interno ho una a anche
se in stampatello minuscolo la
flag "g" sta per global che vuol dire non
fermarti al al primo al primo carattere
che mi mi risolve il mio pattern trovami
tutti i caratteri o tutte le
corrispondenze che corrispondono al mio
pattern quindi "G" sta per global m sta per multi
line quindi se io ho un testo lungo in
più linee e mi dice eseguì la ricerca su
tutte le righe
andiamo a vedere altri esempi un po più
complessi di ricerche ad esempio se io
sto cercando invece di una lettera sulla
sto cercando o più lettere insieme per
esempio sto cercando la "i" e la "a" quindi io
vado a cercare che dentro al mio testo
ci sia una i seguita da una a e mi dice
vero perché io qui una i seguita da una a
se io avessi messo l'ha i seguita da
una o mi direbbe falso perché io qui non
ho nessuna i seguito da una o esempio
un po più complesso vediamo anzi qui
voglio usare se facciamo così che
avevamo let pattern 1 e usiamo il
l'oggetto regExp
e come pattern ci metto parentesi
quadrate adesso qui si entra un po nel
vivo delle regole espressioni regolari e
posso mettere r s t e poi ci metto posso
specificare come secondo argomento
quando creo un oggetto con l'oggetto
built in regExp si specifica la flag
posso mettere in case insensitive
non cambia niente cosa vogliono dire le le le
le parentesi quadrate e le parentesi
quadra vanno a dirmi cerca dentro al
mio testo eccolo qui la lettera r oppure
la lettera s
oppure la lettera t che vuol dire dimmi
solo se dentro al mio test c'è una r
oppure una s oppure una t andiamo a
vedere il responso del pattern 1 seguito
da test e posso sempre dentro il mio
testo mi dice è vero perché io dentro al
mio testo non ho nessuna r
non ho nessuna esse però una lettera t e
quindi a lui basta che una di queste tre
lettere sia dentro e questo io lo
specifico usando le parentesi quadrate
ancora come vi dicevo adesso questa è solo
una breve nozione un breve esempio
dovete andarli a vedere se volete il
link che vi metterò in descrizione che
vi spiega tutto per bene quindi se io
qui non avessi la t ma cercarsi solo o
una r una s
avrei falso eccolo qui falso
altro esempio possiamo fare questo
esempio qui chiamiamolo pattern due
io vado a cercare un numero il numero
può essere da 0 a 9 invece di scrivere
trovami o uno 0 un 2 un 3 posso fare una usare
la scorciatoia mettendo il simbolo meno
qui che mi vuol dire cerca qualsiasi
numero che sia è compreso tra 0
e 9 se io avessi messo dentro cinque qui
sarebbe cercami qualsiasi numero che sia
compreso da 0 a 5
mettiamo 9 comunque pattern 2
andiamo a vedere mi dice falso perché
io qui non ho nessun numero se io qui ci
metto un numero come il 5 lui mi dice è
vero perché io ho un numero compreso da
0 a 9 se io avevo un numero cercami un
numero compreso da 0 a 4 sarebbe ancora
falso perché il 5 non è tra 0 e 4 qui ho
un altro esempio
beh possiamo passare a il metodo search
il metodo search
anzi no altro esempio la usiamo la
flag global così vi faccio vedere come
funziona la flag globale allora
mettiamo una riga giusto per spaziare un
po qui allora metodo global
diciamo che io ho il pattern pattern 3
specifico questo pattern sempre la
lettera o seguita dalla flag g ecco qui
e diciamo che io voglio vedere quante
volte la lettera o è presente nel mio testo
si comincia con pattern 3 last.index mi
dice 0 praticamente lui vado a dire tu
usando la proprietà last.index mi dice
da dove javascript comincerà a cercare
dentro al mio testo quindi comincio dal
carattere 0 se vi ricordate una stringa
può essere considerata una specie di
array dove il primo carattere è
cominciata in posizione 0 quindi indice 0 e
poi via via si aumentano gli indici in
base alle lettere della stringa quindi
io qui parto
dalla posizione 0 adesso io vado a
chiamare il metodo test console log
pattern tre test testo eccolo qui lui mi
dice è vero ha trovato la prima o la
prima è questa qui
la prima è in posizione 3 perché la ci
e 0 1 2 e 3
se adesso io vado a visualizzare adesso
da dove ripartirà il mio e javascript
per eseguire la prossima ricerca mi dice
4 lui e ha trovato la la o imposizione 3
quindi dai lui ripartirà dalla posizione
4
quindi se adesso io vado a visualizzare
la prossima o dove lui mi dice hai
trovato un'altra ok dove la se la
seconda hoc ha trovato è questa o di
mondo se adesso io vado a visualizzare
adesso da dove ripartirà per la ricerca
dalla posizione 7 perché questa o a
disposizione 6
tutto questo perché io sto usando la
flight global se io non usavo la flag global
trovato il primo la prima o si fermava e
non mi diceva più niente
continuiamo andiamo avanti ecco qui
andiamo in cerca di una di un altro ho
trovato un'altra o imposizione 9 che è
questa qui quindi ricomincerò dalla
posizione 10 andiamo avanti
ho trovata un'altra o che questa qui in
posizione 15 quindi io ricomincerò dalla
posizione 16 se adesso io vado a
visualizzare se lui trova ancora o mi
dice falso ho finito tutto il mio testo
e non ci sono più o quindi ti riporto
falso ecco questa è un esempio di come
si fanno le ricerche usando la flag
global
passiamo al metodo search allora il
metodo search invece di ritornarvi il
vero falso quindi un valore booleano mi
ritorna l'indice in cui trova
la corrispondenza del pattern quindi se
io ho sempre il mio testo beh allora
console log possiamo usare ok cerchiamo
sempre la o metto search ci passo
dentro testo anzi no scusate questo qui
funziona
all'inverso si mette dentro il testo poi
si mette search e poi l'argomento è il
pattern da passarci dentro quindi eccolo
qui posizione tra anzi mettiamo anche
spazio posizione 3 la prima o che ho
trovato a imposizione 3 se posso usare
passare dentro sempre il mio pattern e
usando una flag e per esempio quindi se
io adesso voglio cercare diciamo la c
ci passo dentro una c è lui mi dirà meno
uno
ecco qui quando quando non trova
corrispondenza javascript i riporta
all'indice meno uno perché sappiamo che
se qui si parte con zero e qui si
finisce con sé non so quanti altri sono
comunque saranno una ventina
non esiste un carattere meno 1 quindi se
lui mi riporta a meno uno significa che
non c'è corrispondenza dal pattern però
se ci metto la la flag i e mi dice
carattere zero perché il mio primo
carattere con la c è questo qui ok
questo è il metodo search passiamo al
nuovo metodo il metodo exec
il metodo exec invece di ritornarvi o
un booleano o l'indice quindi ho un
booleano un numero mi ritorna un oggetto
andiamo subito a vedere un esempio con sole log
in questo caso si ritorna a
passare il pattern prima del diciamo
voglio cercare il pattern mon
poi si mette exec e dentro si passa il
testo
andiamo a vedere come risulta il nostro
ogetto eccolo qui mi ritorna questo
oggetto andiamo ad aprirlo in cui mi
dice io ho trovato ho trovato il tuo
pattern mon
l'ho trovato che comincia dalla
posizione 5 perché io qui ho 0 1 2 3 4 e
quindi indici 5 e poi mi ritorna anche
tutto l'input che era stato inserito
quindi tutto questo è tutto la mia frase
o se non trova corrispondenza ad esempio
se io qui mettevo won
io ricevo un nullo quindi dove non
ricevo un
un valore che significa non oggetto
perché non ho trovato corrispondenza
anzi questi qua ve li faccio vedere tutti e
due
ecco qui il metodo match
questo è un altro metodo dell'oggetto
regExp andiamo a vedere come
funziona allora se io uso anche in
questo caso si ritorna a scrivere prima
il testo e poi il pattern dentro come
argomento quindi testo match e dentro ci
passò il pattern che può essere o se
io lo uso senza la flag global match
funziona esattamente come exec
quindi se io vado a vedere come vedete
anzi facciamo proprio uguale
mon ecco qui funziona alla stessa
maniera quindi exec e match se
usato se senza la flag global sono
identici se io vado a vedere lo stesso
metodo match ci mettiamo solo perché
sennò più di più con la flag global
vediamo cosa succede mi ritorna un array
con tutte le volte in cui la il nostro
pattern è stato ritrovato è quindi io 4
1 2 3 4 e qui ciò le 4 o facciamo
un'altra riga e passiamo a vedere alcune
funzioni delle stringhe usate coi
metodi delle espressioni regolari
ecco qui andiamo a vedere la funzione
replace la funzione replace
o meglio il metodo replace non è un
metodo dell'oggetto regExp ma è un
metodo dell'oggetto stringa però può
essere usato assieme alle espressioni
regolari e andiamo a vedere come
funziona
diciamo che io ho un nuovo testo mio
testo e ci metto dentro il mio testo a
cui vado a inserire replace vi faccio
vedere come funziona con le stringhe
normalmente e poi come funziona con le
espressioni regolari
allora dentro al metodo replace si
passano due argomenti il primo argomento
è il pattern da cercare in questo caso
sto cercando
queste due lettere vicine e come secondo
argomento passo quello con cui voglio
rimpiazzare queste due lettere diciamo
lettera maiuscola A
se adesso io vado a fare l'output del
nostro testo del new test del mio testo
ecco qui io ho convertito le due lettere
mo con la e quindi adesso
ciao lando ciao pianeta o invece di ciao
mondo o rimpiazzato replace mo con la
stessa cosa posso fare con le
espressioni regolari
quindi io qui vado a inserire un
espressione regolare invece di metterci
la stringa ad esempio possiamo fare così
pianeta posso anche metterci alla flag
non c'entra niente è la sostituisco
magari con un mio testo uno che amiamo
lo questo e vediamo cosa succede ecco
qui usando un'espressione regolare io ho
sostituito la parola pianeta o meglio le
prime tre lettere della parola della
parola pianeta con m o quindi ciao
moneta come si può intuire se io posso
usare reprace con le stringhe però ho
un po' le mani legate perché qui devo
scrivere perfettamente quello che sto
cercando mentre se io uso un'espressione
regolare come si può capire
posso creare un qualcosa di più
complesso un rimpiazzamento di lettere
di più lettere
spesso specificando diversi pattern qui
come vi ripeto ancora dovete andarvi a
vedere un po come funzionano queste
espressioni regolari o un altro con la
ecmascript 6 anzi qua specifico anzi
mi sa che l'ho già scritto
lì sono state introdotte tre
nuove metodi dell'oggetto
stringa startsWith endsWith e include
e possono essere usati invece di usare
il metodo test andiamo a vedere ad
esempio io ho una una stringa che si
chiamiamola stringa diciamo tavolo ecco
qui e vi faccio vedere tutte e due le
maniere usando l'espressione regolare
usando e la nuova funzione stringa delle
stringhe allora console.log diciamo che
io voglio trovare come comincia questa
parola
allora io espressione regolare e quando
io cerco l'inizio di una parola c'è
questo carattere da mettere il carret
poi method tav perché voglio vedere se
la mia parola inizia con tav e poi ci
metto test e ci metto il mio stringa il
mio testo anzi qua metterci
qui e lui mi dice è vero perché la la
mia stringa inizia con tav
come si può usare il startsWith molto
semplice si mette stringa quindi passo
il mio testo e poi metto il metodo
startsWith e dentro ci passo il mio
argomento tav e lui mi dice scusate è
questa qua e la stringa
e lui mi dice è vero praticamente la mia
stringa inizia con tav si ecco qui
stessa cosa si può fare per come finisce
la una parola ad esempio io per dire
come finisce una parola scrivo allora qui
finisce olo è ci metto il simbolo del
dollaro e se adesso facciamo un output
lui mi dice è vero perché tavolo finisce
con olo usando il metodo and endsWith
e qui ci metto olo lo stesso ho lo
stesso risultato vero vero ultimo se io
sto cercando all'inter come l'interno di
della mia stringa ancora allora dentro
la mia stringa qui ci metto dentro vo e
lui mi dice vero altrimenti posso usare
il metodo includes e qui ci metto vo e lui
ancora mi dice è vero quindi ricordatevi
che dovete fare questo tipo di
operazioni se non volete usare
l'espressione regolare con l'ecmascript 6
sono state introdotte questi
nuovi metodi per vedere come inizia come
finisce e se al loro interno ci sono
questi questi pattern o con questo è
tutto ci sentiamo prossimo video ciao