Share
Expresiile regulate pot fi înfricoșătoare ... cu adevărat înfricoșătoare. Din fericire, odată ce memorați ceea ce reprezintă fiecare simbol, frica repede dispare. Dacă vă potriviți titlul acestui articol, aveți multe de învățat! Să începem.
Cheia pentru a învăța cum să utilizați în mod eficient expresii regulate este să luați doar o zi și să memorați toate simbolurile. Acesta este cel mai bun sfat pe care îl pot oferi. Stați jos, creați niște cărți flash și pur și simplu memorați-le! Iată cele mai frecvente:
Da - nu este distractiv, ci doar memorați-i. Veți fi recunoscători dacă o faceți!
Puteți fi sigur că veți dori să vă rupeți părul la un moment dat când o expresie nu funcționează, indiferent cât de mult ar trebui - sau credeți că ar trebui! Descărcarea aplicației Desktop RegExr este esențială și este destul de distractiv să vă păcăliți. În plus față de verificarea în timp real, oferă și o bara laterală care detaliază definiția și utilizarea fiecărui simbol. Descarca-l!.
Următorul pas este să învățați cum să utilizați de fapt aceste simboluri! Dacă videoclipul este preferința dvs., aveți noroc! Urmăriți seria video cu cinci lecții, "Expresii regulate pentru manechine".
În această secțiune finală, vom examina câteva dintre cele mai importante metode JavaScript pentru a lucra cu expresii regulate.
Aceasta acceptă un singur parametru șir și returnează un boolean care indică dacă a fost găsit sau nu un meci. Dacă nu trebuie neapărat să efectuați o operație cu un rezultat specific de potrivire - de exemplu, atunci când validați un nume de utilizator - "test" va face treaba bine.
var username = 'JohnSmith'; alert (. / [A-Za-z _-] + / test (username)); // returnează adevărat
Deasupra, începem prin declararea unei expresii regulate, care permite numai literele majuscule și minuscule, un subliniere și o liniuță. Am înfășurat aceste caractere acceptate în paranteze, care desemnează a clasa de caractere. Simbolul "+", care continuă, indică faptul că căutăm unul sau mai mulți dintre caracterele precedente. Apoi testăm acel model împotriva variabilei noastre, "JohnSmith". Deoarece a existat o potrivire, browserul va afișa o casetă de alertă cu valoarea "true".
Probabil sunteți deja familiarizați cu metoda divizării. Acceptă o singură expresie regulată care reprezintă locul în care ar trebui să apară "împărțirea". Rețineți că putem folosi și un șir dacă preferăm.
var str = 'acesta este șirul meu'; alertă (str.split (/ \ s /)); // alerte "acest lucru, este, meu, șir"
Prin trecerea "\ s" - reprezentând un singur spațiu - acum ne-am împărțit șirul într-o matrice. Dacă aveți nevoie să accesați o anumită valoare, trebuie doar să adăugați indexul dorit.
var str = 'acesta este sirul meu'; alert (str.split (/ \ s /) [3]); // alerte "șir"
Așa cum v-ați putea aștepta, metoda "replace" vă permite să înlocuiți un anumit bloc de text, reprezentat printr-un șir sau expresie regulată, cu un șir diferit.
Dacă vrem să schimbăm șirul "Hello, World" la "Hello, Universe", am putea face următoarele:
var someString = 'Bună ziua, lumea'; someString = someString.replace (/ World /, 'Universe'); alert (someString); // alerte "Bună, Univers"
Trebuie remarcat faptul că, pentru acest exemplu simplu, am fi putut pur și simplu să folosim .replace ("Lumea", "Universul"). De asemenea, folosirea metodei de înlocuire nu suprascrie automat valoarea variabilei, trebuie să redistribuim valoarea returnată înapoi la variabila, someString.
Pentru un alt exemplu, să ne imaginăm că dorim să realizăm câteva precauții elementare de securitate atunci când un utilizator se înscrie pentru site-ul nostru fictiv. Poate că vrem să luăm numele de utilizator și să eliminăm orice simbol, ghilimele, semi-colonii etc. Efectuarea unei astfel de sarcini este trivială cu JavaScript și expresii regulate.
var username = 'J; ohnSmith; @%'; username = username.replace (/ [^ A-Za-z \ d _-] + /, ");
Având în vedere valoarea de alertă produsă, se poate presupune că a apărut o eroare în codul nostru (pe care îl vom examina în curând). Totuși, acest lucru nu este cazul. Dacă observați, semicolonul imediat după "J" a fost eliminat conform așteptărilor. Pentru a spune motorului să continue să caute șirul pentru mai multe potriviri, adăugăm un "g" imediat după închiderea înainte; acest modifier sau steag, înseamnă "global". Codul nostru revizuit ar trebui să pară acum:
var username = 'J; ohnSmith; @%'; username = username.replace (/ [^ A-Za-z \ d _-] + / g, "); alerta (username);
Acum, expresia regulată caută șirul ENTIRE și înlocuiește toate caracterele necesare. Pentru a revedea expresia reală - .înlocuiți (/ [^ A-Za-z \ d _-] + / g "); - este important să observați simbolul carot din interiorul brațelor. Când este plasat într-o clasă de caractere, înseamnă că "găsiți ceva ce nu este ..." Acum, dacă re-citim, se spune, găsiți orice nu este o literă, un număr (reprezentat de \ d), o subliniere sau o bordură ; dacă găsiți un meci, înlocuiți-l cu nimic sau, de fapt, ștergeți complet caracterul.
Spre deosebire de metoda "test", "match ()" va returna un matrice care conține fiecare meci găsit.
var nume = 'JeffreyWay'; alertă (name.match (/ e /)); // alerte "e"
Codul de mai sus va avertiza un singur e. Cu toate acestea, observați că există de fapt două e în șirul "JeffreyWay". Noi, din nou, trebuie să folosim modificatorul "g" pentru a declara un "gcăutare lobală.
var nume = 'JeffreyWay'; alert (name.match (/ e / g)); // alerte "e, e"
Dacă apoi vrem să avertizăm una din acele valori specifice cu matricea, putem menționa indicele dorit după paranteze.
var nume = 'JeffreyWay'; alert (name.match (/ e / g) [1]); // alerte "e"
Să examinăm un alt exemplu pentru a ne asigura că îl înțelegem corect.
var string = 'Acesta este doar un șir cu unele 12345 și altele! @ # $ amestecate în.'; alert (string.match (/ [a-z] + / Gi)); // alerte "Acest lucru este doar un șir, cu unii, și unii, amestecați în"
În expresia regulată, am creat un model care se potrivește cu una sau mai multe litere mari sau minuscule - datorită modificatorului "i". De asemenea, adăugăm "g" pentru a declara o căutare globală. Codul de mai sus va avertiza "Acesta, este, doar, un, șir, cu, unele, și, unele, amestecate, în." Dacă am vrut apoi să prindem una din aceste valori în interiorul matricei din interiorul unei variabile, noi doar facem referință la indexul corect.
var string = 'Acesta este doar un șir cu unele 12345 și altele! @ # $ amestecate în.'; var potrivește = string.match (/ [a-z] + / gi); alert (meciuri [2]); // alerte "doar"
Doar pentru practică, să încercăm să împărțim o adresă de e-mail - [email protected] - în numele și numele de domeniu respectiv: "nettuts" și "tutsplus".
var email = '[email protected]'; alert (/ / [a-z \ d _-] +) @ ([a-z \ d _-] +) \. // alerte "nettuts, tutsplus"
Dacă sunteți nou în expresiile regulate, codul de mai sus ar putea părea puțin cam descurajant. Nu vă faceți griji, a făcut pentru noi toți când am început. Odată ce l-ați rupe în subseturi, este foarte simplu. Să o luăm bucăți.
.înlocuiți (/ ([a-z \ d _-] +)
Pornind de la mijloc, căutăm orice literă, număr, subliniere sau liniuță și potrivim una sau mai multe dintre ele (+). Aș dori să accesăm valoarea a ceea ce este potrivită aici, așa că o împacheiem în paranteze. În acest fel, putem face referire la acest set de potrivire mai târziu!
@ ([A-z \ d _-] +)
Imediat după meciul precedent, găsiți simbolul @ și apoi un alt set de una sau mai multe litere, numere, subliniere și liniuțe. Încă o dată, înfășurăm setul în paranteze pentru a avea acces mai târziu.
\. [A-z] 2,4 / ig,
În continuare, găsim o singură perioadă (trebuie să scăpăm cu "\" din cauza faptului că, în expresii regulate, se potrivește cu orice caracter (uneori cu excepția unei rupturi de linie). Ultima parte este găsirea ".com". "Știm că domeniile majoritare, dacă nu toate, vor avea un sufix între două și patru caractere (com, edu, net, nume, etc.) Dacă suntem conștienți de acea gamă specifică, putem renunța la o un simbol mai generic, ca * sau +, și înfășurați, în schimb, cele două numere în coarde curbate, reprezentând respectiv minimul și maximul.
'$ 1, $ 2')
Această ultimă parte reprezintă al doilea parametru al metodei de înlocuire sau ce am dori să înlocuim cu seturile potrivite. Aici, folosim $ 1 și $ 2 pentru a face referire la ceea ce a fost stocat în primul și al doilea set de paranteze, respectiv. În aceste cazuri particulare, $ 1 se referă la "nettuts", iar $ 2 se referă la "tutsplus".
Pentru proiectul nostru final, vom replica obiectul de locație. Pentru cei necunoscuți, obiectul de locație vă oferă informații despre pagina curentă: href, gazdă, port, protocol etc. Vă rugăm să rețineți că acest lucru este pur și simplu de dragul practicilor. Într-un site din lumea reală, utilizați doar obiectul de locație preexistent!
Începem mai întâi prin crearea funcției de localizare, care acceptă un singur parametru care reprezintă adresa URL pe care dorim să o "decodifice"; o vom numi "locul".
funcția loc (url)
Acum, putem să spunem așa și să treci într-o adresă urâtă:
Accentsconagua
var l = loc ('http://www.somesite.com?somekey=somevalue&anotherkey=anothervalue#TheHashGoesHere'); Apoi, trebuie să returnați un obiect care conține o mulțime de metode.
funcția loc (url) return
Deși nu le vom crea pe toate, vom imita o mână sau cam așa ceva. Primul va fi "căutarea". Folosind expresii regulate, va trebui să căutăm url și să returnez totul în cadrul querystring.
retur search: function () retur url.match (/\\(((.+)/ i) [1]; // returnează "somekey = somevalue & anotherkey = anothervalue # theHashGoesHere"
Deasupra, luăm textul trecut și încercăm să ne potrivim cu expresiile noastre regulate. Această expresie caută șirul pentru semnul întrebării, reprezentând începutul coloanei de interogare. În acest moment, trebuie să prindem caracterele rămase, motiv pentru care (. +) este înfășurat în paranteze. În cele din urmă, trebuie să returnăm doar acel bloc de caractere, așa că folosim [1] pentru a-l viza.
Acum vom crea o altă metodă care returnează hash-ul adresei URL sau orice altceva după semnul lirei.
hash: function () retur url.match (/#(.+)/ i) [1]; // returnează "HashGoesHere ",
De data aceasta, vom căuta semnul lirei și din nou vom prinde următoarele caractere în paranteze, astfel încât să putem face referire numai la acel subset specific - cu [1].
Metoda protocolului ar trebui să returneze, după cum ați presupune, protocolul utilizat de pagină - care este, în general, "http" sau "https".
protocol: funcția () retur url.match (/ (ht | f) tps?: / i) [0]; // returnează "http: ',
Aceasta este ceva mai dificil, doar pentru că există câteva opțiuni pentru a compensa: http, https și ftp. Deși am putea face ceva asemănător - (Http | https | ftp) - ar fi mai curat să faceți: (Ht | f) tps?
Aceasta înseamnă că trebuie să găsim întâi un caracter "ht" sau "f". Apoi, vom potrivi caracterele "tp". Ultimul "s" ar trebui să fie opțional, așa că adăugăm un semn de întrebare, ceea ce înseamnă că poate fi zero sau o instanță a caracterului precedent. Mult mai dragut.
Din motive de scurtă durată, aceasta va fi ultima noastră. Acesta va returna pur și simplu adresa URL a paginii.
href: function () retur url.match (/ (. + \. [a-z] 2,4) / ig); // returnează "http://www.somesite.com"
Aici se potrivesc toate caracterele până la punctul în care găsim o perioadă urmată de două-patru caractere (reprezentând com, au, edu, nume, etc.). Este important să ne dăm seama că putem face aceste expresii la fel de complicate sau la fel de simple cum ne-ar plăcea. Totul depinde de cât de strictă trebuie să fim.
functie loc (url) retur search: function () retur url.match (/\\((.+)/ i) [1]; , hash: function () retur url.match (/#(.+)/ i) [1]; , protocol: function () retur url.match (/ (ht | f) tps?: /) [0]; , href: function () retur url.match (/ (. + \. [a-z] 2,4) / ig);
Cu această funcție creată, putem alerta cu ușurință fiecare sub-secțiune făcând:
var l = loc ('http://www.net.tutsplus.edu?key=value#hash'); alert (l.href ()); //www.net.tutsplus.com alertă (l.protocol ()); // http: ... etc. Vă mulțumim pentru lectură! Eu sunt Jeffrey Way ... deconectat.
