Share
Regelmessige uttrykk kan være skummelt ... veldig skummelt. Heldigvis, når du husker hva hvert symbol representerer, frykter raskt frykten. Hvis du passer til tittelen på denne artikkelen, er det mye å lære! La oss komme i gang.
Nøkkelen til å lære å effektivt bruke vanlige uttrykk er å bare ta en dag og huske alle symbolene. Dette er det beste rådet jeg muligens kan tilby. Sett deg ned, lage noen flash-kort, og bare husk dem! Her er de vanligste:
Yep - det er ikke morsomt, men bare husk dem. Du vil være takknemlig hvis du gjør det!
Du kan være sikker på at du vil rive håret ut på et eller annet tidspunkt når et uttrykk ikke virker, uansett hvor mye det burde - eller du tror det burde! Laste ned RegExr Desktop-appen er viktig, og det er veldig morsomt å lure deg rundt med. I tillegg til sanntidskontroll, tilbyr den også et sidebar som beskriver definisjonen og bruken av hvert symbol. Last det ned!.
Det neste trinnet er å lære å faktisk bruke disse symbolene! Hvis video er din preferanse, har du lykke! Se filmleser med fem leksjoner, "Regular Expressions for Dummies."
I denne siste delen vurderer vi en håndfull av de viktigste JavaScript-metodene for å arbeide med vanlige uttrykk.
Denne aksepterer en enkelt strengparameter og returnerer en boolean som indikerer om en kamp er funnet. Hvis du ikke nødvendigvis trenger å utføre en operasjon med et spesifikt kombinert resultat - for eksempel når du bekrefter et brukernavn - "test" vil gjøre jobben bare bra.
var brukernavn = 'john smith'; alert (. / [A-Za-z _-] + / test (brukernavn)); // returnerer sant
Ovenfor begynner vi ved å erklære et vanlig uttrykk som bare tillater store og små bokstaver, et understreke og en dash. Vi pakker inn disse aksepterte tegnene innenfor parentes, som betegner en karakter klasse. Symbolet "+", som fortsetter det, betyr at vi leter etter en eller flere av noen av de foregående tegnene. Vi tester deretter mønsteret mot vår variabel, "JohnSmith." Fordi det var en kamp, vil nettleseren vise en varslingsboks med verdien "true".
Du er mest sannsynlig allerede kjent med splittmetoden. Den aksepterer et enkelt regulært uttrykk som representerer hvor "splittet" skal forekomme. Vær oppmerksom på at vi også kan bruke en streng hvis vi foretrekker det.
var str = 'dette er min streng'; alert (str.split (/ \ s /)); // varsler "dette, er, min, streng"
Ved å sende "\ s" - som representerer en enkelt plass - har vi splittet vår streng i en matrise. Hvis du trenger å få tilgang til en bestemt verdi, legger du bare til ønsket indeks.
var str = 'dette er min denne strengen'; alert (str.split (/ \ s /) [3]); // varsler "streng"
Som du kanskje forventer, gir "erstatt" -metoden deg muligheten til å erstatte en bestemt blokk med tekst, representert av en streng eller vanlig uttrykk, med en annen streng.
Hvis vi ønsket å endre strengen "Hei, Verden" til "Hei, Universum", kunne vi gjøre følgende:
var someString = 'Hei, Verden'; someString = someString.replace (/ World /, 'Universe'); alert (someString); // varsler "Hei, Universe"
Det skal bemerkes at for dette enkle eksempelet kunne vi bare ha brukt .replace ('World', 'Universe'). Også, ved å bruke erstatningsmetoden overskrives ikke automatisk verdien av variabelen, vi må overføre den returnerte verdien tilbake til variabelen, someString.
For et annet eksempel, kan vi forestille oss at vi ønsker å utføre noen grunnleggende sikkerhetsregler når en bruker registrerer seg for vårt fiktive nettsted. Kanskje vi ønsker å ta med brukernavnet og fjerne eventuelle symboler, anførselstegn, halvkolonner osv. Å utføre en slik oppgave er trivial med JavaScript og regulære uttrykk.
var brukernavn = 'J; ohnSmith; @%'; brukernavn = brukernavn.replace (/ [^ A-Za-z \ d _-] + /, "); varsel (brukernavn); // JohnSmith; @%
Gitt den produserte varslingsverdien kan man anta at det var en feil i vår kode (som vi vil se på kort tid). Dette er imidlertid ikke tilfelle. Hvis du vil merke, ble halvkolonnen umiddelbart etter "J" fjernet som forventet. For å fortelle motoren å fortsette å søke strengen for flere kamper, legger vi til en "g" rett etter vår lukkende fremover-slash; denne modifikatoren, eller flagg, står for "global". Vår reviderte kode skal nå se slik ut:
var brukernavn = 'J; ohnSmith; @%'; brukernavn = brukernavn.replace (/ [^ A-Za-z \ d _-] + / g, "); varsel (brukernavn); // varsler JohnSmith
Nå søker det vanlige uttrykket i ENTRE-strengen og erstatter alle nødvendige tegn. For å se på selve uttrykket - .erstatte (/ [^ A-Za-z \ d _-] + / g, "); - Det er viktig å merke carot-symbolet inne i parentesene. Når det er plassert i en karakterklasse, betyr dette "finne noe som ikke er ..." Nå, hvis vi leser igjen, står det å finne noe som ikke er et bokstav, nummer (representert av \ d), et understrek eller en strekk ; hvis du finner en kamp, erstatt den med ingenting, eller i virkeligheten slette tegnet helt.
I motsetning til "test" -metoden, vil "match ()" returnere en matrise som inneholder hver kamp som er funnet.
var navnet = 'JeffreyWay'; alert (name.match (/ e /)); // varsler "e"
Koden ovenfor vil varsle en enkelt "e." Vær imidlertid oppmerksom på at det faktisk er to e-er i strengen "JeffreyWay." Vi må nok en gang bruke "g" modifikatoren til å erklære en "global søk.
var navnet = 'JeffreyWay'; alert (name.match (/ e / g)); // varsler "e, e"
Hvis vi da vil varsle en av de spesifikke verdiene med matrisen, kan vi referere til ønsket indeks etter parentesene.
var navnet = 'JeffreyWay'; alert (name.match (/ e / g) [1]); // varsler "e"
La oss vurdere et annet eksempel for å sikre at vi forstår det riktig.
var string = 'Dette er bare en streng med noen 12345 og noen! @ # $ blandet inn'; alert (string.match (/ [a-z] + / j)); // varsler "Dette er bare en streng med, noen og noen blandet i"
Innen det vanlige uttrykket skapte vi et mønster som matcher en eller flere bokstaver eller små bokstaver - takket være "i" -modifiseringen. Vi legger også til "g" for å erklære et globalt søk. Koden ovenfor vil varsle "Dette er bare en streng med noen og noen blandet inn." Hvis vi så ønsket å fange en av disse verdiene i arrayet inne i en variabel, refererer vi bare til den riktige indeksen.
var string = 'Dette er bare en streng med noen 12345 og noen! @ # $ blandet inn'; var matches = string.match (/ [a-z] + / gi); alert (fyrstikker [2]); // varsler "bare"
Bare for øvelser, la oss prøve å dele en e-postadresse - [email protected] - til sitt respektive brukernavn og domenenavn: "nettuts," og "tutsplus".
var email = '[email protected]'; varsling (email.replace (/ ([a-z \ d _-] +) @ ([a-z \ d _-] +) \. [a-z] 2,4 / ig, '$ 1, $ 2')); // varsler "nettutskrifter, tutsplus"
Hvis du er helt ny til vanlige uttrykk, kan koden ovenfor se litt skremmende ut. Ikke bekymre deg, det gjorde for oss alle da vi først startet. Når du bryter det ned i delsett, er det egentlig ganske enkelt. La oss ta det stykke for hverandre.
.erstatte (/ ([a-z \ d _-] +)
Fra midten begynner vi etter hvilket som helst brev, nummer, understrek eller dash, og samsvarer med en malm flere av dem (+). Vi ønsker å få tilgang til verdien av det som matches her, så vi pakker det innen parentes. På den måten kan vi referere til dette samsvarende settet senere!
@ ([A-z \ d _-] +)
Umiddelbart etter den forrige kampen, finn @ symbolet, og deretter et annet sett med en eller flere bokstaver, tall, understreking og bindestreker. Igjen, vi pakker det settet innen parentes for å få tilgang til det senere.
\. [A-z] 2,4 / ig,
Fortsett på, vi finner en enkelt periode (vi må unnslippe den med "\" på grunn av at det i regulære uttrykk samsvarer med et hvilket som helst tegn (noen ganger unntatt en linjeskift). Den siste delen er å finne ".com". "Vi vet at flertallet, om ikke alle, domener vil ha et suffiksområde på to til fire tegn (com, edu, net, navn, etc.). Hvis vi er klar over det bestemte området, kan vi forgå ved å bruke en mer generisk symbol som * eller +, og i stedet vikle de to tallene i krøllete bånd, som representerer minimum og maksimum, henholdsvis.
'$ 1, $ 2')
Denne siste delen representerer den andre parameteren for erstatningsmetoden, eller hva vi ønsker å erstatte de samsvarende settene med. Her bruker vi $ 1 og $ 2 for å referere til det som ble lagret i henholdsvis første og andre sett av parenteser. I disse tilfellene refererer $ 1 til "nettutsøk", og $ 2 refererer til "tutsplus".
For vårt sluttprosjekt vil vi gjenskape posisjonobjektet. For de ukjente gir stedet objektet deg informasjon om gjeldende side: href, vert, port, protokoll, etc. Vær oppmerksom på at dette er rent for øvelsens skyld. På et ekte verdensnettsted, bruk bare det eksisterende eksisterende objektet!
Vi begynner først ved å skape vår plasseringsfunksjon, som aksepterer en enkelt parameter som representerer nettadressen som vi ønsker å "dekode" vi kaller det "loc."
funksjon lok (url)
Nå kan vi kalle det slik, og passere i en gibberish url:
Accentsconagua
var l = loc ('http://www.somesite.com?somekey=somevalue&anotherkey=anothervalue#theHashGoesHere'); Deretter må vi returnere et objekt som inneholder en håndfull metoder.
funksjon lok (url) retur
Selv om vi ikke vil skape dem alle, vil vi etterligne en håndfull eller så. Den første blir "søk". Ved å bruke vanlige uttrykk, må vi søke i nettadressen og returnere alt innenfor spørringen.
returnere search: function () return url.match (/\?(.+)/ i) [1]; // returnerer somekey = somevalue & anotherkey = anothervalue # theHashGoesHere "
Ovenfor tar vi passet i url, og prøver å matche våre vanlige uttrykk mot det. Dette uttrykket søker gjennom strengen for spørsmålstegnet, som representerer begynnelsen på vår spørringstring. På dette tidspunktet må vi fange de resterende tegnene, og derfor (. +) er innpakket i parentes. Til slutt må vi bare returnere den bokstavkarakteren, så vi bruker [1] for å målrette den.
Nå skal vi opprette en annen metode som returnerer nettadressens hash, eller noe etter pundskiltet.
hash: funksjon () return url.match (/#(.+)/ i) [1]; // returnerer "theHashGoesHere",
Denne gangen søker vi etter pundstegnet, og igjen, feller de følgende tegnene innenfor parentes, slik at vi kun kan referere til det bestemte delmengden - med [1].
Protokollmetoden bør returnere, som du vil gjette, protokollen som brukes av siden - som vanligvis er «http» eller «https».
protokoll: funksjon () return url.match (/ (ht | f) tps?: / i) [0]; // returnerer http: ',
Denne er litt vanskeligere, bare fordi det er noen valg å kompensere for: http, https og ftp. Selv om vi kunne gjøre noe sånt - (Http | https | ftp) - det ville være renere å gjøre: (Ht | f) tps?
Dette indikerer at vi først bør finne enten et "ht" eller "f" -karakteret. Deretter matcher vi "tp" -tegnene. Den endelige "s" skal være valgfri, så vi legger til et spørsmålstegn, som betyr at det kan være null eller en forekomst av det forrige tegnet. Mye bedre.
For korthets skyld vil dette være vår siste. Det vil ganske enkelt returnere URLen til siden.
href: funksjon () return url.match (/ (. + \. [a-z] 2,4) / ig); // returnerer "http://www.somesite.com"
Her matcher vi alle tegn til det punktet der vi finner en periode etterfulgt av to til fire tegn (som representerer com, au, edu, navn, etc.). Det er viktig å innse at vi kan gjøre disse uttrykkene så kompliserte eller så enkle som vi ønsker. Alt avhenger av hvor streng vi må være.
funksjon loc (url) return search: function () return url.match (/\?(.+)/ i) [1]; , hash: funksjon () return url.match (/#(.+)/ i) [1]; , protokoll: funksjon () return url.match (/ (ht | f) tps?: /) [0]; , href: funksjon () return url.match (/ (. + \. [a-z] 2,4) / ig);
Med den funksjonen opprettet, kan vi enkelt varsle hvert underpunkt ved å gjøre:
var l = loc ('http://www.net.tutsplus.edu?key=value#hash'); alert (l.href ()); // http://www.net.tutsplus.com varsling (l.protocol ()); // http: ... etc. Takk for at du leste! Jeg er Jeffrey Way ... signering av.
