Share
Regelbundna uttryck kan vara skrämmande ... väldigt läskigt. Lyckligtvis, när du minns vad varje symbol representerar, sjunker rädslan snabbt. Om du passar titeln på den här artikeln finns det mycket att lära! Låt oss börja.
Nyckeln till att lära sig att effektivt använda reguljära uttryck är att bara ta en dag och memorera alla symbolerna. Detta är det bästa rådet jag kan erbjuda. Sätt dig ner, skapa några flash-kort, och bara memorera dem! Här är de vanligaste:
Yep - det är inte kul, men bara memorera dem. Du kommer vara tacksam om du gör det!
Du kan vara säker på att du vill riva ut håret på ett eller annat ställe när ett uttryck inte fungerar, oavsett hur mycket det borde - eller du tror det borde! Att ladda ner RegExr Desktop-appen är avgörande, och det är väldigt roligt att lura runt med. Förutom kontroll i realtid, erbjuder den också ett sidofält som beskriver definitionen och användningen av varje symbol. Ladda ner det!.
Nästa steg är att lära sig att faktiskt använda dessa symboler! Om video är din preferens, har du lycka till! Titta på fem lektionsvideoserier, "Regular Expressions for Dummies."
I det här sista avsnittet granskar vi en handfull av de viktigaste JavaScript-metoderna för att arbeta med reguljära uttryck.
Den här accepterar en enkelsträngsparameter och returnerar en boolesk indikerande huruvida en matchning har hittats eller inte. Om du inte nödvändigtvis behöver utföra en operation med ett specifikt matchat resultat - till exempel när du validerar ett användarnamn - kommer "test" att göra jobbet bara bra.
var användarnamn = 'JohnSmith'; alert (. / [A-Za-z _-] ^ / prov (användarnamn)); // returnerar sant
Ovan börjar vi med att förklara ett regelbundet uttryck som endast tillåter stora bokstäver, understreck och streck. Vi paketerar dessa accepterade tecken inom parentes, som betecknar a tecken klass. Symbolen "+", som går vidare, betyder att vi letar efter en eller flera av de föregående tecknen. Vi testar sedan det mönstret mot vår variabel, "JohnSmith." Eftersom det fanns en match, visar webbläsaren en varningsruta med värdet "true".
Du är troligtvis redan bekant med split-metoden. Det accepterar ett enda regelbundet uttryck som representerar var "split" ska inträffa. Observera att vi även kan använda en sträng om vi skulle föredra.
var str = 'det här är min sträng'; alert (str.split (/ \ s /)); // varningar "det här är min sträng"
Genom att överföra "\ s" - representerar ett enda utrymme - har vi nu delat vår sträng i en array. Om du behöver komma åt ett visst värde, lägg bara till önskat index.
var str = 'detta är min här sträng'; alert (str.split (/ \ s /) [3]); // varningar "sträng"
Med "ersätt" -metoden kan du, som du kan förvänta dig, ersätta ett visst textblock, representerat av en sträng eller ett regelbundet uttryck med en annan sträng.
Om vi ville ändra strängen "Hej, Världen" till "Hej, Universum" kunde vi göra följande:
var someString = 'Hej, Världen'; someString = someString.replace (/ World /, 'Universe'); alert (somestring); // varningar "Hej, Universum"
Det bör noteras att för detta enkla exempel kunde vi helt enkelt använda .replace ("World", "Universe"). Om du använder ersättningsmetoden skriver du inte automatiskt värdet för variabeln, vi måste vidarebefordra det returnerade värdet tillbaka till variabeln, someString.
För ett annat exempel, låt oss föreställa oss att vi vill utföra några elementära säkerhetsåtgärder när en användare registrerar sig för vår fiktiva webbplats. Kanske vill vi ta sitt användarnamn och ta bort eventuella symboler, citattecken, halvkolon osv. Att utföra en sådan uppgift är trivial med JavaScript och reguljära uttryck.
var användarnamn = 'J; ohnSmith; @%'; användarnamn = användarnamn.replace (/ [^ A-Za-z \ d _-] + /, "); varning (användarnamn); // JohnSmith; @%
Med tanke på det producerade varningsvärdet kan man anta att det fanns ett fel i vår kod (som vi granskar inom kort). Detta är dock inte fallet. Om du märker, avlägsnades halvkolonet strax efter "J" som förväntat. För att berätta för motorn att fortsätta söka strängen för fler matcher lägger vi till en "g" direkt efter vår stängning framåt-slash; denna modifierare, eller flagga, står för "global". Vår reviderade kod ska nu se ut så här:
var användarnamn = 'J; ohnSmith; @%'; användarnamn = användarnamn.replace (/ [^ A-Za-z \ d _-] + / g, "); varning (användarnamn); // varningar JohnSmith
Nu söker det vanliga uttrycket hela strängen och ersätter alla nödvändiga tecken. Att granska det faktiska uttrycket - .replace (/ [^ A-Za-z \ d _-] ^ / g, "); - Det är viktigt att märka carot-symbolen inom parenteserna. När det är placerat inom en karaktärklass betyder det att "hitta någonting som inte är ..." Om vi nu läser igen, står det att hitta något som inte är ett brev, ett tal (representerat av \ d), ett understreck eller ett streck ; om du hittar en match, ersätt den med ingenting, eller i själva verket radera tecknet helt.
Till skillnad från "test" -metoden kommer "match ()" att returnera en array som innehåller varje matchad matchning.
var namn = 'JeffreyWay'; alert (name.match (/ e /)); // varningar "e"
Koden ovan kommer att varna en enda "e." Observera dock att det faktiskt finns två e i strängen "JeffreyWay". Vi måste än en gång använda "g" modifieraren för att deklarera en "global sökning.
var namn = 'JeffreyWay'; alert (name.match (/ e / g)); // varningar "e, e"
Om vi sedan vill varna ett av de specifika värdena med matrisen kan vi referera till det önskade indexet efter parenteserna.
var namn = 'JeffreyWay'; alert (name.match (/ e / g) [1]); // varningar "e"
Låt oss granska ett annat exempel så att vi förstår det korrekt.
var string = 'Det här är bara en sträng med några 12345 och några! @ # $ blandas in.'; alert (String.match (/ [a-z] ^ / gi)); // varningar "Detta är bara en sträng med några och blandade i"
Inom det reguljära uttrycket skapade vi ett mönster som matchar en eller flera övre eller små bokstäver - tack vare "i" modifieraren. Vi lägger också till "g" för att deklarera en global sökning. Koden ovan kommer att varna "Detta är bara en sträng med några och några blandade in." Om vi då ville fälla ett av dessa värden inom arrayen inuti en variabel, hänvisar vi bara till det korrekta indexet.
var string = 'Det här är bara en sträng med några 12345 och några! @ # $ blandas in.'; var matchar = string.match (/ [a-z] + / gi); alert (matchningar [2]); // varningar "bara"
Bara för övning, låt oss försöka dela upp en e-postadress - [email protected] - till sitt respektive användarnamn och domännamn: "netuts" och "tutsplus".
var email = '[email protected]'; varning (email.replace (/ ([a-z \ d _-] +) @ ([a-z \ d _-] +) \. [a-z] 2,4 / ig, '$ 1, $ 2')); // varningar "nät, tutsplus"
Om du är helt ny för vanliga uttryck kan koden ovan vara lite skrämmande. Oroa dig inte, det gjorde för oss alla när vi började. När du bryter ner det i delmängder är det dock ganska enkelt. Låt oss ta det bit för bit.
.replace (/ ([a-z \ d _-] ^)
Från mitten söker vi efter alla bokstäver, siffror, understrykning eller bindestreck, och matchar en malm mer av dem (+). Vi vill ha tillgång till värdet av vad som matchas här, så vi lägger det inom parentes. På så sätt kan vi hänvisa till den här matchade uppsättningen senare!
@ ([A-z \ d _-] ^)
Omedelbart efter föregående match, hitta @ symbolen, och sedan en annan uppsättning av en eller flera bokstäver, siffror, understreck och streck. Återigen sätter vi in det som ligger inom parentes för att komma åt det senare.
\. [A-z] 2,4 / ig,
Fortsätt på, vi hittar en enda period (vi måste fly den med "\" på grund av att det i regelbundna uttryck matchar alla tecken (ibland exklusive linjepaus). Den sista delen är att hitta ".com". "Vi vet att majoriteten, om inte alla domäner kommer att ha ett suffixintervall på två till fyra tecken (com, edu, net, namn, etc.). Om vi är medvetna om det specifika sortimentet, kan vi gå undan med att använda en mer generisk symbol som * eller +, och i stället sätta in de två siffrorna i lockiga hängslen, som representerar minsta respektive maximala.
"$ 1, $ 2")
Den här sista delen representerar den andra parametern för ersättningsmetoden, eller vad vi skulle vilja ersätta de matchade uppsättningarna med. Här använder vi $ 1 och $ 2 för att hänvisa till vad som lagrades inom respektive första och andra uppsättning parentes. I de här fallen hänvisar $ 1 till "nät", och $ 2 avser "tutsplus".
För vårt slutliga projekt ska vi replikera platsobjektet. För de som är obekanta, ger platsobjektet information om den aktuella sidan: href, värd, port, protokoll, etc. Observera att det här är enbart för övningens skull. På en verklig världssida, använd bara det existerande platsobjektet!
Vi börjar med att skapa vår platsfunktion, som accepterar en enda parameter som representerar den URL som vi vill "avkoda" vi kallar det "loc."
funktion lok (url)
Nu kan vi kalla det så, och passera i en gibberish url:
Accentsconagua
var l = loc ('http://www.somesite.com?somekey=somevalue&anotherkey=anothervalue#theHashGoesHere'); Därefter måste vi returnera ett objekt som innehåller en handfull metoder.
funktion loc (url) return
Även om vi inte skapar dem alla kommer vi att efterlikna en handfull eller så. Den första kommer att vara "sök". Med regelbundna uttryck måste vi söka i webbadressen och returnera allt inom frågesträngen.
returnera search: function () return url.match (/\?(.+)/ i) [1]; // returnerar somekey = somevalue & anotherkey = anothervalue # theHashGoesHere "
Ovan tar vi passet i url och försöker matcha våra reguljära uttryck mot det. Detta uttryck söker igenom strängen för frågetecknet, som representerar början av vår frågesträng. Vid denna tidpunkt måste vi fånga de återstående tecknen, vilket är anledningen till (. +) är inslaget inom parentes. Slutligen behöver vi bara returnera det blocket av tecken, så vi använder [1] för att rikta in det.
Nu skapar vi en annan metod som returnerar URL-adressen, eller något efter pundstegnet.
hash: funktion () return url.match (/#(.+)/ i) [1]; // returnerar "theHashGoesHere",
Den här gången söker vi efter pundskylten och fäller återigen följande tecken inom parentes så att vi endast kan hänvisa till den specifika delmängden - med [1].
Protokollmetoden bör returnera, som du skulle gissa, det protokoll som används av sidan - vilket i allmänhet är "http" eller "https".
protokoll: funktion () returnera url.match (/ (ht | f) tps?: / i) [0]; // returnerar http: ',
Den här är lite svårare, bara för att det finns några val att kompensera för: http, https och ftp. Även om vi kunde göra något liknande - (Http | https | ftp) - det skulle vara renare att göra: (Ht | f) tps?
Detta anger att vi först bör hitta antingen "ht" eller "f" tecken. Därefter matchar vi "tp" karaktärerna. Slutliga "s" ska vara frivilliga, så vi lägger till ett frågetecken, vilket innebär att det kan finnas noll eller en förekomst av föregående tecken. Mycket trevligare.
För korthetens skull kommer det här vara vår sista. Det kommer helt enkelt att returnera sidans webbadress.
href: funktion () returnera url.match (/ (. + \. [a-z] 2,4) / ig); // returnerar "http://www.somesite.com"
Här matchar vi alla tecken upp till den punkt där vi hittar en period följt av två-fyra tecken (representerar com, au, edu, namn, etc.). Det är viktigt att inse att vi kan göra dessa uttryck så komplicerade eller så enkla som vi skulle vilja. Det beror allt på hur strikt vi måste vara.
funktion loc (url) return search: function () return url.match (/\?(.+)/ i) [1]; , hash: funktion () returnera url.match (/#(.+)/ i) [1]; , protokoll: funktion () returnera url.match (/ (ht | f) tps?: /) [0]; , href: funktion () returnera url.match (/ (. + \. [a-z] 2,4) / ig);
Med den funktionen skapade kan vi enkelt varna varje underavdelning genom att göra:
var l = loc ('http://www.net.tutsplus.edu?key=value#hash'); alert (l.href ()); // http://www.net.tutsplus.com alert (l.protocol ()); // http: ... etc. Tack för att du läser! Jag är Jeffrey Way ... undertecknar.
