Share
Reguliere expressies kunnen eng zijn ... echt eng. Gelukkig verdwijnt de angst snel als je onthoudt wat elk symbool vertegenwoordigt. Als je de titel van dit artikel invult, valt er nog veel te leren! Laten we beginnen.
De sleutel om te leren effectief reguliere expressies te gebruiken, is door gewoon een dag te nemen en alle symbolen te onthouden. Dit is het beste advies dat ik kan bieden. Ga zitten, maak een paar flash-kaarten en onthoud ze gewoon! Dit zijn de meest voorkomende:
Ja, het is niet leuk, maar onthoud ze gewoon. Je zult dankbaar zijn als je dat doet!
Je kunt er zeker van zijn dat je je haar op een gegeven moment wilt uitscheuren wanneer een uitdrukking niet werkt, ongeacht hoeveel het zou moeten - of je denkt dat het zou moeten! Het downloaden van de RegExr Desktop-app is essentieel, en het is echt best leuk om mee te spelen. Naast real-time controle biedt het ook een zijbalk die de definitie en het gebruik van elk symbool beschrijft. Download het!.
De volgende stap is om te leren hoe deze symbolen daadwerkelijk te gebruiken! Als video je voorkeur heeft, heb je geluk! Bekijk de videoreeks met vijf lessen, 'Reguliere uitdrukkingen voor dummies'.
In dit laatste gedeelte bespreken we een handvol van de belangrijkste JavaScript-methoden voor het werken met reguliere expressies.
Deze accepteert een enkele stringparameter en retourneert een booleaanse waarde die aangeeft of er al dan niet een overeenkomst is gevonden. Als u niet per se een bewerking hoeft uit te voeren met een specifiek resultaat dat overeenkomt - bijvoorbeeld bij het valideren van een gebruikersnaam - zal "test" het werk prima doen.
var gebruikersnaam = 'JohnSmith'; alert (. / [A-Za-z _-] + / test (gebruikersnaam)); // geeft waar terug
Hierboven beginnen we met het declareren van een reguliere expressie die alleen hoofd- en kleine letters, een onderstrepingsteken en een streepje toestaat. We wikkelen deze geaccepteerde tekens tussen haakjes, wat staat voor een tekenklasse. Het "+" symbool, dat het voortzet, betekent dat we op zoek zijn naar een of meer van de voorgaande karakters. Vervolgens testen we dat patroon tegen onze variabele, "JohnSmith." Omdat er een overeenkomst was, geeft de browser een waarschuwingsvenster weer met de waarde 'waar'.
Je bent waarschijnlijk al bekend met de splitmethode. Het accepteert een enkele reguliere expressie die aangeeft waar de "split" zou moeten plaatsvinden. Houd er rekening mee dat we ook een tekenreeks kunnen gebruiken als we dit liever hebben.
var str = 'dit is mijn touwtje'; alert (str.split (/ \ s /)); // meldingen "this, is, my, string"
Door '\ s' door te geven - wat neerkomt op een enkele spatie - hebben we onze string nu opgedeeld in een array. Als u toegang wilt hebben tot een bepaalde waarde, voegt u gewoon de gewenste index toe.
var str = 'dit is mijn deze string'; alert (str.split (/ \ s /) [3]); // waarschuwingen "string"
Zoals je zou verwachten, kun je met de "replace" -methode een bepaald tekstblok vervangen door een string of reguliere expressie, met een andere string.
Als we de tekenreeks "Hallo, Wereld" in "Hallo, universum" wilden wijzigen, konden we het volgende doen:
var someString = 'Hallo, Wereld'; someString = someString.replace (/ World /, 'Universe'); alert (someString); // waarschuwingen "Hallo, Universe"
Opgemerkt moet worden dat we voor dit eenvoudige voorbeeld simpelweg .replace ('World', 'Universe') zouden hebben gebruikt. Ook overschrijft het gebruik van de methode replace niet automatisch de waarde van de variabele, we moeten de geretourneerde waarde opnieuw toewijzen aan de variabele someString.
Laten we ons voor een ander voorbeeld voorstellen dat we enkele elementaire veiligheidsmaatregelen willen treffen wanneer een gebruiker zich aanmeldt voor onze fictieve site. Misschien willen we hun gebruikersnaam achterhalen en alle symbolen, aanhalingstekens, puntkomma's, etc. verwijderen. Het uitvoeren van zo'n taak is triviaal met JavaScript en reguliere expressies.
var gebruikersnaam = 'J; ohnSmith; @%'; gebruikersnaam = gebruikersnaam.replace (/ [^ A-Za-z \ d _-] + /, "); alert (gebruikersnaam); // JohnSmith; @%
Gezien de geproduceerde waarschuwingswaarde, zou men kunnen veronderstellen dat er een fout in onze code was (die we binnenkort zullen herzien). Dit is echter niet het geval. Als je opvalt, is de puntkomma direct na de "J" zoals verwacht verwijderd. Om de motor te vertellen om verder te zoeken in de reeks voor meer overeenkomsten, voegen we een "g" toe direct na onze afsluitende forward-slash; deze modifier, of vlag, staat voor 'global'. Onze herziene code zou er nu als volgt uit moeten zien:
var gebruikersnaam = 'J; ohnSmith; @%'; gebruikersnaam = gebruikersnaam.replace (/ [^ A-Za-z \ d _-] + / g, "); alert (gebruikersnaam); // alerts JohnSmith
De reguliere expressie doorzoekt nu de hele reeks en vervangt alle benodigde tekens. Om de daadwerkelijke uitdrukking te bekijken - .vervang (/ [^ A-Za-z \ d _-] + / g "); - het is belangrijk om het carot-symbool in de haakjes op te merken. Wanneer het in een tekenklasse wordt geplaatst, betekent dit "iets vinden dat NIET IS ..." Nu, als we opnieuw lezen, staat er iets dat NIET een letter, een getal (vertegenwoordigd door \ d), een onderstrepingsteken of een streepje is ; als je een overeenkomst vindt, vervang je deze door niets of verwijder je het personage in feite helemaal.
In tegenstelling tot de "test" -methode, zal "match ()" een array retourneren die elke gevonden match bevat.
var name = 'JeffreyWay'; alert (name.match (/ e /)); // meldingen "e"
De bovenstaande code waarschuwt een enkele "e." Merk echter op dat er eigenlijk twee e's in de reeks "JeffreyWay" zitten. We moeten opnieuw de "g" -modifier gebruiken om een "global zoeken.
var name = 'JeffreyWay'; alert (name.match (/ e / g)); // meldingen "e, e"
Als we dan een van die specifieke waarden met de array willen waarschuwen, kunnen we na de haakjes naar de gewenste index verwijzen.
var name = 'JeffreyWay'; alert (name.match (/ e / g) [1]); // meldingen "e"
Laten we een ander voorbeeld bekijken om er zeker van te zijn dat we het goed begrijpen.
var string = 'Dit is slechts een string met zo'n 12345 en wat! @ # $ ingemengd.'; alert (string.match (/ [a-z] + / gi)); // alerts "Dit is, is gewoon, een, tekenreeks, met, sommige en, wat, gemengd, in"
Binnen de reguliere expressie hebben we een patroon gemaakt dat overeenkomt met een of meer hoofdletters of kleine letters, dankzij de "i" -wijziging. We voegen ook de "g" toe om een globale zoekopdracht te declareren. De bovenstaande code waarschuwt "This, is, just, a, string, with, some, and some, mixed, in." Als we vervolgens een van deze waarden in de array binnen een variabele willen vangen, verwijzen we alleen naar de juiste index.
var string = 'Dit is slechts een string met zo'n 12345 en wat! @ # $ ingemengd.'; var overeenkomt met = string.match (/ [a-z] + / gi); alert (wedstrijden [2]); // meldingen "just"
Gewoon om te oefenen, laten we proberen een e-mailadres te splitsen - [email protected] - in zijn respectievelijke gebruikersnaam en domeinnaam: "nettuts" en "tutsplus."
var email = '[email protected]'; alert (email.replace (/ ([a-z \ d _-] +) @ ([a-z \ d _-] +) \. [a-z] 2,4 / ig, '$ 1, $ 2')); // meldingen "nettuts, tutsplus"
Als je helemaal nieuw bent voor reguliere expressies, ziet de bovenstaande code er misschien een beetje angstaanjagend uit. Maak je geen zorgen, het deed voor ons allemaal toen we net begonnen. Als je het echter opsplitst in subsets, is het echt heel simpel. Laten we het stuk voor stuk aannemen.
.vervang (/ ([a-z \ d _-] +)
Uitgaande van het midden, zoeken we naar een letter, cijfer, onderstrepingsteken of streepje en matchen we er een of meer (+). We willen graag toegang hebben tot de waarde van alles wat hier overeenkomt, dus we verpakken het tussen haakjes. Op die manier kunnen we later verwijzen naar deze overeenkomende set!
@ ([A-z \ d _-] +)
Zoek onmiddellijk na het voorgaande symbool het @ -symbool en vervolgens nog een set van een of meer letters, cijfers, onderstrepingstekens en streepjes. Nogmaals, we verpakken die reeks tussen haakjes om er later toegang toe te hebben.
\. [A-z] 2,4 / ig,
Verderop vinden we een enkele periode (we moeten eraan ontsnappen met "\" vanwege het feit dat het in reguliere expressies overeenkomt met elk teken (soms met uitzondering van een regeleinde). Het laatste deel is het vinden van de ".com. "We weten dat de meeste, zo niet alle, domeinen een achtervoegsel hebben van twee tot vier tekens (com, edu, net, naam, enz.). Als we ons bewust zijn van dat specifieke bereik, kunnen we afzien van het gebruik van een meer generiek symbool zoals * of +, en plaats in plaats daarvan de twee cijfers tussen accolades, respectievelijk het minimum en maximum.
'$ 1, $ 2')
Dit laatste deel vertegenwoordigt de tweede parameter van de vervangingsmethode, of waarmee we de overeenkomende sets willen vervangen. Hier gebruiken we $ 1 en $ 2 om te verwijzen naar wat werd opgeslagen in respectievelijk de eerste en tweede sets haakjes. In deze specifieke gevallen verwijst $ 1 naar 'nettuts' en $ 2 verwijst naar 'tutsplus'.
Voor ons laatste project repliceren we het locatieobject. Voor wie onbekend is, biedt het locatieobject u informatie over de huidige pagina: de href, host, poort, protocol, etc. Houd er rekening mee dat dit puur voor de praktijk is. Gebruik in een echte wereldsite het reeds bestaande locatieobject!
We beginnen met het maken van onze locatiefunctie, die een enkele parameter accepteert die de URL vertegenwoordigt die we willen "decoderen"; we zullen het 'loc' noemen.
function loc (url)
Nu, we kunnen het zo noemen, en doorgeven in een brabbeltaal url:
Accentsconagua
var l = loc ('http://www.somesite.com?somekey=somevalue&anotherkey=anothervalue#theHashGoesHere'); Vervolgens moeten we een object retourneren dat een handvol methoden bevat.
functie loc (url) ga terug
Hoewel we ze niet allemaal zullen creëren, zullen we een handvol of zo nabootsen. De eerste is 'zoeken'. Als we reguliere expressies gebruiken, moeten we de URL doorzoeken en alles binnen de querystring retourneren.
return search: function () return url.match (/\?(.+)/ i) [1]; // geeft als resultaat "somekey = somevalue & anotherkey = anothervalue # theHashGoesHere"
Hierboven nemen we het doorgegeven in de URL en proberen we onze reguliere expressies ertegenover te plaatsen. Deze uitdrukking doorzoekt de tekenreeks voor het vraagteken en vertegenwoordigt het begin van onze querystring. Op dit punt moeten we de resterende personages vangen, wat de reden is waarom (. +) is verpakt tussen haakjes. Ten slotte moeten we alleen dat blok tekens retourneren, dus gebruiken we [1] om het te targeten.
Nu maken we een andere methode die de hash van de URL retourneert, of iets anders na het hekje.
hash: function () return url.match (/#(.+)/ i) [1]; // geeft "theHashGegevens" terug,
Deze keer zoeken we naar het hekje, en vangen we wederom de volgende tekens tussen haakjes, zodat we alleen naar die specifieke subset kunnen verwijzen - met [1].
De protocolmethode moet, zoals u zou kunnen raden, terugkeren naar het protocol dat door de pagina wordt gebruikt - meestal is dit 'http' of 'https'.
protocol: function () return url.match (/ (ht | f) tps?: / i) [0]; // geeft 'http:' terug,
Deze is iets lastiger, alleen omdat er een paar keuzes zijn om te compenseren: http, https en ftp. Hoewel we zoiets zouden kunnen doen - (Http | https | ftp) - het zou schoner zijn om te doen: (Ht | f) tps?
Dit geeft aan dat we eerst een "ht" of het "f" karakter moeten vinden. Vervolgens matchen we de "tp" -tekens. De laatste "s" moeten optioneel zijn, dus we voegen een vraagteken toe, wat betekent dat er nul of één exemplaar van het voorgaande teken kan zijn. Veel leuker.
Kortheidshalve is dit onze laatste. Het zal gewoon de url van de pagina retourneren.
href: function () return url.match (/ (. + \. [a-z] 2,4) / ig); // geeft als resultaat "http://www.somesite.com"
Hier zijn we alle karakters aan het matchen tot het punt waar we een periode vinden gevolgd door twee-vier tekens (die com, au, edu, naam, etc. vertegenwoordigen). Het is belangrijk om te beseffen dat we deze uitdrukkingen zo gecompliceerd of eenvoudig kunnen maken als we zouden willen. Het hangt allemaal af van hoe strikt we moeten zijn.
function loc (url) return search: function () return url.match (/\?(.+)/ i) [1]; , hash: function () return url.match (/#(.+)/ i) [1]; , protocol: function () return url.match (/ (ht | f) tps?: /) [0]; , href: function () return url.match (/ (. + \. [a-z] 2,4) / ig);
Met die functie gemaakt, kunnen we elke subsectie gemakkelijk melden door te doen:
var l = loc ('http://www.net.tutsplus.edu?key=value#hash'); alert (l.href ()); // http://www.net.tutsplus.com alert (l.protocol ()); // http: ... enz. Bedankt voor het lezen! Ik ben Jeffrey Way ... ondertekening.
