Share
Le espressioni regolari possono essere spaventose ... davvero spaventose. Fortunatamente, una volta memorizzato ciò che ciascun simbolo rappresenta, la paura scompare rapidamente. Se ti adatti al titolo di questo articolo, c'è molto da imparare! Iniziamo.
La chiave per imparare come utilizzare in modo efficace le espressioni regolari è semplicemente prendere un giorno e memorizzare tutti i simboli. Questo è il miglior consiglio che io possa offrire. Siediti, crea alcune schede flash e semplicemente memorizzale! Ecco i più comuni:
Sì, non è divertente, ma semplicemente memorizzali. Sarai grato se lo fai!
Puoi essere certo che vorresti strapparti i capelli in un punto o in un altro quando un'espressione non funziona, non importa quanto dovrebbe - o pensi che dovrebbe! Scaricare l'app RegExr Desktop è essenziale ed è davvero divertente da scherzare. Oltre al controllo in tempo reale, offre anche una barra laterale che descrive in dettaglio la definizione e l'utilizzo di ogni simbolo. Scaricalo!.
Il prossimo passo è imparare come usare effettivamente questi simboli! Se il video è la tua preferenza, sei fortunato! Guarda la serie di video di cinque lezioni, "Espressioni regolari per principianti".
In questa sezione finale, esamineremo una manciata dei più importanti metodi JavaScript per lavorare con le espressioni regolari.
Questo accetta un singolo parametro di stringa e restituisce un valore booleano che indica se una corrispondenza è stata trovata o meno. Se non è necessario eseguire un'operazione con uno specifico risultato corrispondente - ad esempio, quando si convalida un nome utente - "test" farà il lavoro bene.
var username = 'JohnSmith'; avviso (. / [A-Za-z _-] + / prova (nome utente)); // restituisce true
In alto, iniziamo dichiarando un'espressione regolare che consente solo lettere maiuscole e minuscole, un carattere di sottolineatura e un trattino. Copiamo questi caratteri accettati tra parentesi, che designano a classe di personaggio. Il simbolo "+", che procede, indica che stiamo cercando uno o più dei personaggi precedenti. Quindi testiamo questo modello con la nostra variabile "JohnSmith". Perché c'era una corrispondenza, il browser visualizzerà una finestra di avviso con il valore "true".
Probabilmente hai già familiarità con il metodo split. Accetta una singola espressione regolare che rappresenta dove dovrebbe avvenire la "divisione". Si prega di notare che possiamo anche usare una stringa se preferiamo.
var str = 'questa è la mia stringa'; alert (str.split (/ \ s /)); // avvisa "questo, è, mio, stringa"
Passando "\ s", che rappresenta un singolo spazio, abbiamo suddiviso la nostra stringa in una matrice. Se devi accedere a un particolare valore, aggiungi l'indice desiderato.
var str = 'questa è la mia stringa'; alert (str.split (/ \ s /) [3]); // avvisi "stringa"
Come ci si potrebbe aspettare, il metodo "replace" consente di sostituire un determinato blocco di testo, rappresentato da una stringa o un'espressione regolare, con una stringa diversa.
Se volessimo modificare la stringa "Hello, World" in "Hello, Universe", potremmo fare quanto segue:
var someString = 'Ciao, Mondo'; someString = someString.replace (/ World /, 'Universe'); alert (someString); // avvisi "Hello, Universe"
Va notato che, per questo semplice esempio, avremmo potuto semplicemente usare .replace ('World', 'Universe'). Inoltre, l'utilizzo del metodo replace non sovrascrive automaticamente il valore della variabile, dobbiamo riassegnare il valore restituito alla variabile, someString.
Per un altro esempio, immaginiamo che desideriamo eseguire alcune elementari precauzioni di sicurezza quando un utente si iscrive al nostro sito fittizio. Forse vogliamo prendere il loro nome utente e rimuovere tutti i simboli, le virgolette, i punti e virgola, ecc. L'esecuzione di tale compito è banale con JavaScript ed espressioni regolari.
var username = 'J; ohnSmith; @%'; username = username.replace (/ [^ A-Za-z \ d _-] + /, "); alert (nome utente); // JohnSmith; @%
Dato il valore di avviso prodotto, si potrebbe supporre che ci sia stato un errore nel nostro codice (che esamineremo a breve). Tuttavia, questo non è il caso. Se noterai, il punto e virgola immediatamente dopo la "J" è stato rimosso come previsto. Per dire al motore di continuare a cercare la stringa per ulteriori corrispondenze, aggiungiamo una "g" direttamente dopo la nostra chiusura alla barra in avanti; questo modificatore, o bandiera, sta per "globale". Il nostro codice revisionato dovrebbe ora assomigliare così:
var username = 'J; ohnSmith; @%'; username = username.replace (/ [^ A-Za-z \ d _-] + / g, "); alert (nome utente); // avvisi JohnSmith
Ora, l'espressione regolare cerca la stringa INTERA e sostituisce tutti i caratteri necessari. Per rivedere l'espressione reale - .sostituire (/ [^ A-Za-z \ d _-] + / g, "); - è importante notare il simbolo di carot all'interno delle parentesi. Quando viene inserito in una classe di caratteri, significa "trova tutto ciò che NON È ..." Ora, se rileggiamo, dice, trova tutto ciò che NON è una lettera, un numero (rappresentato da \ d), un trattino basso o un trattino ; se trovi una corrispondenza, sostituiscila con niente, o, in effetti, elimina completamente il personaggio.
A differenza del metodo "test", "match ()" restituirà un array contenente ogni corrispondenza trovata.
var name = 'JeffreyWay'; alert (name.match (/ e /)); // avvisi "e"
Il codice sopra avviserà una singola "e". Tuttavia, nota che ci sono effettivamente due e nella stringa "JeffreyWay". Dobbiamo, ancora una volta, usare il modificatore "g" per dichiarare un "gricerca lobal.
var name = 'JeffreyWay'; alert (name.match (/ e / g)); // avvisi "e, e"
Se poi vogliamo avvisare uno di quei valori specifici con l'array, possiamo fare riferimento all'indice desiderato dopo le parentesi.
var name = 'JeffreyWay'; alert (name.match (/ e / g) [1]); // avvisi "e"
Esaminiamo un altro esempio per assicurarci di averlo compreso correttamente.
var string = 'Questa è solo una stringa con circa 12345 e alcuni! @ # $ mescolati.'; avviso (String.match (/ [a-z] + / gi)); // alerts "Questo, è, solo, una stringa, con, alcuni, e, alcuni, misti, in"
All'interno dell'espressione regolare, abbiamo creato un modello che corrisponde a una o più lettere maiuscole o minuscole, grazie al modificatore "i". Aggiungiamo anche la "g" per dichiarare una ricerca globale. Il codice sopra avviserà "Questo, è, solo, una stringa, con, alcuni, e, alcuni, misti, in". Se poi volessimo intercettare uno di questi valori all'interno dell'array all'interno di una variabile, facciamo semplicemente riferimento all'indice corretto.
var string = 'Questa è solo una stringa con circa 12345 e alcuni! @ # $ mescolati.'; var matches = string.match (/ [a-z] + / gi); allarme (partite [2]); // avvisi "solo"
Solo per esercitarsi, proviamo a dividere un indirizzo email - [email protected] - nel suo nome utente e nome di dominio rispettivi: "nettuts" e "tutsplus".
var email = '[email protected]'; alert (email.replace (/ ([a-z \ d _-] +) @ ([a-z \ d _-] +) \. [a-z] 2,4 / ig, '$ 1, $ 2')); // avvisi "nettuts, tutsplus"
Se sei nuovo di zecca per le espressioni regolari, il codice sopra potrebbe sembrare un po 'scoraggiante. Non preoccuparti, lo ha fatto per tutti noi quando abbiamo iniziato. Tuttavia, una volta scomposto in sottoinsiemi, è davvero piuttosto semplice. Prendiamolo pezzo per pezzo.
.sostituire (/ ([a-z \ d _-] +)
A partire dal centro, cerchiamo qualsiasi lettera, numero, trattino basso o trattino e ne abbiniamo uno o più (+). Vorremmo accedere al valore di qualsiasi cosa corrisponda qui, quindi la racchiudiamo tra parentesi. In questo modo, possiamo fare riferimento a questo insieme abbinato più tardi!
@ ([A-z \ d _-] +)
Subito dopo la partita precedente, trova il simbolo @, quindi un altro set di una o più lettere, numeri, trattini bassi e trattini. Ancora una volta, avvolgiamo quell'insieme tra parentesi per accedervi in seguito.
\. [A-z] 2,4 / ig,
Proseguendo, troviamo un singolo punto (dobbiamo sfuggire a "\" perché, nelle espressioni regolari, corrisponde a qualsiasi carattere (a volte escludendo un'interruzione di riga). L'ultima parte è trovare ".com. "Sappiamo che la maggior parte, se non tutti, i domini avranno un intervallo di suffisso di due - quattro caratteri (com, edu, rete, nome, ecc.) Se siamo a conoscenza di tale intervallo specifico, possiamo rinunciare a utilizzare un simboli più generici come * o +, e invece racchiudono i due numeri all'interno di parentesi graffe, che rappresentano rispettivamente il minimo e il massimo.
"$ 1, $ 2")
Quest'ultima parte rappresenta il secondo parametro del metodo replace, o quello che vorremmo sostituire con i set abbinati. Qui, stiamo usando $ 1 e $ 2 per riferirsi a ciò che è stato memorizzato rispettivamente nel primo e nel secondo gruppo di parentesi. In questi casi particolari, $ 1 si riferisce a "nettuts" e $ 2 si riferisce a "tutsplus".
Per il nostro progetto finale, replicheremo l'oggetto posizione. Per chi non ha familiarità, l'oggetto posizione fornisce informazioni sulla pagina corrente: href, host, porta, protocollo, ecc. Si prega di notare che questo è puramente per l'amor di pratica. In un sito reale, basta usare l'oggetto posizione preesistente!
Iniziamo innanzitutto creando la nostra funzione location, che accetta un singolo parametro che rappresenta l'url che vogliamo "decodificare"; lo chiameremo "loc".
function loc (url)
Ora, possiamo chiamarlo così, e passare in un urlo senza senso:
Accentsconagua
var l = loc ('http://www.somesite.com?somekey=somevalue&anotherkey=anothervalue#theHashGoesHere'); Successivamente, dobbiamo restituire un oggetto che contiene una manciata di metodi.
function loc (url) return
Sebbene non li creeremo tutti, ne imiteremo una manciata o poco più. Il primo sarà "ricerca". Usando le espressioni regolari, dovremo cercare l'url e restituire tutto all'interno della querystring.
return search: function () return url.match (/\?(.+)/ i) [1]; // restituisce "somekey = somevalue & anotherkey = anothervalue # theHashGoesHere"
Sopra, prendiamo l'url passato, e cerchiamo di abbinare le nostre espressioni regolari contro di esso. Questa espressione cerca nella stringa il punto interrogativo, che rappresenta l'inizio della nostra querystring. A questo punto, abbiamo bisogno di intrappolare i caratteri rimanenti, motivo per cui il (. +) è racchiuso tra parentesi. Infine, dobbiamo restituire solo quel blocco di caratteri, quindi usiamo [1] per bersagliarlo.
Ora creeremo un altro metodo che restituisce l'hash dell'url, o qualsiasi cosa dopo il cancelletto.
hash: function () return url.match (/#(.+)/ i) [1]; // restituisce "theHashGoesHere",
Questa volta, cerchiamo il cancelletto e, ancora una volta, intercettiamo i seguenti caratteri tra parentesi in modo che possiamo riferirci solo a quel sottoinsieme specifico - con [1].
Il metodo del protocollo dovrebbe restituire, come si intuirebbe, il protocollo utilizzato dalla pagina, che generalmente è "http" o "https".
protocollo: function () return url.match (/ (ht | f) tps?: / i) [0]; // restituisce "http:",
Questo è leggermente più complicato, solo perché ci sono alcune scelte per compensare: http, https e ftp. Anche se potremmo fare qualcosa di simile - (Http | https | ftp) - sarebbe più pulito da fare: (HT | f) tps?
Questo indica che dovremmo prima trovare un carattere "ht" o "f". Successivamente, abbiniamo i caratteri "tp". La "s" finale dovrebbe essere opzionale, quindi aggiungiamo un punto interrogativo, che significa che possono esserci zero o una istanza del carattere precedente. Molto più bello.
Per brevità, questo sarà il nostro ultimo. Restituirà semplicemente l'url della pagina.
href: function () return url.match (/ (. + \. [a-z] 2,4) / ig); // restituisce "http://www.somesite.com"
Qui abbiniamo tutti i personaggi fino al punto in cui troviamo un periodo seguito da due-quattro caratteri (che rappresentano com, au, edu, nome, ecc.). È importante rendersi conto che possiamo rendere queste espressioni complicate o semplici come vorremmo. Tutto dipende da quanto dobbiamo essere severi.
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);
Con questa funzione creata, possiamo facilmente avvisare ogni sottosezione facendo:
var l = loc ('http://www.net.tutsplus.edu?key=value#hash'); alert (l.href ()); // http://www.net.tutsplus.com alert (l.protocol ()); // http: ... ecc. Grazie per aver letto! Sono Jeffrey Way ... che sta per chiudere.
