Guida per principianti alle espressioni regolari in JavaScript

Tutti quelli che lavorano con JavaScript avranno a che fare con stringhe a un certo punto. A volte, dovrai solo memorizzare una stringa all'interno di un'altra variabile e poi passarla sopra. Altre volte, dovrai ispezionarlo e vedere se contiene una sottostringa particolare.

Tuttavia, le cose non sono sempre così facili. Ci saranno momenti in cui non cercherete una sottostringa particolare ma una serie di sottostringhe che seguono un determinato schema.

Diciamo che devi sostituire tutte le occorrenze di "Mele" in una stringa con "mele". Potresti semplicemente usarlo theMainString.replace ("Mele", "mele"). Bello e facile.

Supponiamo che tu debba sostituire "appLes" anche con "apples". Allo stesso modo, "apples" dovrebbe diventare anche "mele". Fondamentalmente, tutte le varianti di case di "Apple" devono essere cambiate in "apple". Passare semplici stringhe come argomento non sarà più pratico o efficiente in questi casi.

È qui che entrano le espressioni regolari: puoi semplicemente utilizzare la flag senza distinzione tra maiuscole e minuscole io e sii fatto con esso. Con la bandiera in posizione, non importa se la stringa originale conteneva "Mele", "Mele", "ApPlEs" o "Mele". Ogni istanza della parola verrà sostituita con "mele".

Proprio come il flag senza distinzione tra maiuscole e minuscole, le espressioni regolari offrono molte altre funzionalità che saranno trattate in questo tutorial.

Utilizzo di espressioni regolari in JavaScript

Devi usare una sintassi leggermente diversa per indicare un'espressione regolare all'interno di un'altra Stringa metodi. A differenza di una semplice stringa, racchiusa tra virgolette, un'espressione regolare è costituita da un motivo racchiuso tra barre. Eventuali flag utilizzati in un'espressione regolare verranno aggiunti dopo la seconda barra.

Tornando all'esempio precedente, ecco cosa è il sostituire() il metodo dovrebbe apparire con un'espressione regolare e una stringa semplice.

"Ho mangiato le mele" .replace ("Mele", "mele"); // Ho mangiato le mele "Ho mangiato le mele" .replace (/ Apples / i, "apples"); // Ho mangiato le mele "Ho mangiato aPPles" .replace ("Mele", "mele"); // Ho mangiato aPPles "I ate aPPles" .replace (/ Apples / i, "apples"); // Ho mangiato mele

Come puoi vedere, l'espressione regolare ha funzionato in entrambi i casi. Ora impareremo di più sulle bandiere e sui caratteri speciali che compongono il modello all'interno di un'espressione regolare.

Barra rovesciata nelle espressioni regolari

Puoi trasformare i caratteri normali in caratteri speciali aggiungendo una barra rovesciata prima di loro. Allo stesso modo, puoi trasformare caratteri speciali in caratteri normali aggiungendo una barra rovesciata prima di loro.

Per esempio, d non è un personaggio speciale però, \ d è usato per abbinare un carattere numerico in una stringa. allo stesso modo, D non è nemmeno un personaggio speciale, ma \ D è usato per abbinare caratteri non numerici in una stringa.

I caratteri numerici includono 0, 1, 2, 3, 4, 5, 6, 7, 8 e 9. Quando si utilizza \ d all'interno di un'espressione regolare, corrisponderà a uno qualsiasi di questi nove caratteri. Quando usi \ D all'interno di un'espressione regolare, corrisponderà a tutti i caratteri non numerici.

Il seguente esempio dovrebbe chiarire le cose.

"L8" .replace (/ \ d / i, "E"); // LE "L8" .replace (/ \ D / i, "E"); // E8 "LLLLL8" .replace (/ \ D / i, "E"); // ELLLL8

Dovresti notare che solo il primo carattere abbinato viene sostituito nel terzo caso. Puoi anche usare le bandiere per sostituire tutte le partite. Impareremo più tardi su tali bandiere.

Proprio come \ d e \ D, ci sono anche altre sequenze di caratteri speciali.

  1. Puoi usare \ w per abbinare qualsiasi carattere "parola" in una stringa. Qui, la parola carattere si riferisce ad A-Z, a-z, 0-9 e _. Quindi, fondamentalmente, corrisponderà a tutte le cifre, tutti gli alfabeti minuscoli e maiuscoli e al trattino basso.
  2. Puoi usare \ W per abbinare qualsiasi carattere non parola in una stringa. Corrisponde a caratteri come%, $, #, ₹, ecc.
  3. Puoi usare \S per abbinare un singolo carattere di spazio bianco, che include spazio, tabulazione, avanzamento modulo e avanzamento riga. Allo stesso modo, puoi usare \S per abbinare tutti gli altri caratteri oltre allo spazio bianco.
  4. Puoi anche cercare un carattere di spazio bianco specifico usando \ f, \ n, \ r, \ t, e \ v, che rappresentano l'avanzamento del modulo, l'avanzamento riga, il ritorno a capo, la scheda orizzontale e la scheda verticale.

A volte, dovrai affrontare situazioni in cui è necessario sostituire una parola con il suo sostituto, ma solo se lo è nonparte di una parola più grande. Ad esempio, considera la seguente frase:

"Un sacco di immagini di ananas sono state pubblicate sull'app".

In questo caso, vogliamo sostituire la parola "app" con "board". Tuttavia, l'utilizzo di un modello di espressione regolare semplice trasformerà "mela" in "boardle" e la frase finale diventerà:

"Un sacco di immagini pineboardle sono state pubblicate sull'app".

In questi casi, puoi usare un'altra sequenza di caratteri speciali: \ b. Questo controlla i confini delle parole. Un limite di parole è formato dall'uso di caratteri non di parole come spazio, "$", "%", "#", ecc. Attenzione, tuttavia, include anche caratteri accentati come "ü".

"Sull'app sono state pubblicate molte immagini di ananas" .replace (/ app /, "board"); // Molte immagini di pineboardle sono state pubblicate sull'app "Un sacco di immagini di ananas sono state pubblicate sull'app" .replace (/ \ bapp /, "board"); // Un sacco di immagini di ananas sono state pubblicate sulla lavagna

Allo stesso modo, puoi usare\ B per abbinare un limite di non parola. Ad esempio, potresti usare \ B per abbinare solo "app" quando si trova all'interno di un'altra parola, come "ananas".

Abbinamento di un numero "n" di ripetizioni

Puoi usare ^ per dire a JavaScript di guardare solo l'inizio della stringa per una corrispondenza. Allo stesso modo, puoi usare $ guardare solo la fine della stringa per una corrispondenza.

Puoi usare *per abbinare l'espressione precedente 0 o più volte. Per esempio, / Ap * / corrisponderà UN, Ap, App, APPP, e così via.

In un modo simile, puoi usare + per abbinare l'espressione precedente 1 o più volte. Per esempio, / Ap + / corrisponderà Ap, App, APPP, e così via. L'espressione non corrisponderà al singolo UN questa volta.

A volte, vuoi solo abbinare un numero specifico di occorrenze di un determinato modello. In questi casi, dovresti usare il N sequenza di caratteri, dove n è un numero. Per esempio, / Ap 2 / corrisponderà App ma no Ap. Corrisponde anche ai primi due 'p's in APPP e lasciare il terzo intatto.

Puoi usare N, per abbinare almeno 'n' occorrenze di una determinata espressione. Ciò significa che / Ap 2, / corrisponderà App ma no Ap. Corrisponde anche a tutti i 'p's in Apppp e sostituirli con la tua stringa sostitutiva.

Puoi anche usare N, m per specificare un numero minimo e massimo e limitare il numero di volte che l'espressione data deve corrispondere. Per esempio, / Ap 2,4 / corrisponderà App, APPP, e Apppp. Corrisponde anche ai primi quattro "p" in Apppppp e lasciare il resto di loro intatto.

"Apppppples" .replace (/ Ap * /, "App"); // Mele "Ales" .replace (/ Ap * /, "App"); // Apples "Appppples" .replace (/ Ap 2 /, "Aggiungi"); // Aggiungi "Appppples" .replace (/ Ap 2, /, "Aggiungi"); // Aggiunge "Appppples" .replace (/ Ap 2,4 /, "Aggiungi"); // Addples

Usare le parentesi per ricordare le partite

Finora, abbiamo sostituito solo modelli con una stringa costante. Ad esempio, nella sezione precedente, la sostituzione che abbiamo usato era sempre "Aggiungi". A volte, dovrai cercare un pattern match all'interno della stringa data e quindi sostituirlo con una parte del pattern.

Diciamo che devi trovare una parola con cinque o più lettere in una stringa e quindi aggiungere una "s" alla fine della parola. In tali casi, non sarà possibile utilizzare un valore di stringa costante in sostituzione, poiché il valore finale dipende dal modello di corrispondenza stesso.

"Mi piace Apple" .replace (/ (\ w 5,) /, '$ 1s'); // Mi piacciono le mele "I like Banana" .replace (/ (\ w 5,) /, '$ 1s'); // Mi piacciono le banane 

Questo è stato un semplice esempio, ma è possibile utilizzare la stessa tecnica per mantenere più di un motivo corrispondente in memoria. Il numero di sotto-modelli nella corrispondenza completa sarà determinato dal numero di parentesi utilizzate.

All'interno della stringa di sostituzione, verrà identificata la prima sub-partita utilizzando $ 1, la seconda sotto partita sarà identificata usando $ 2, e così via. Ecco un altro esempio per chiarire ulteriormente l'uso delle parentesi.

"Sto cercando John e Jason" .replace (/ (\ w +) \ sand \ s (\ w +) /, '$ 2 e $ 1'); // Sto cercando Jason e John

Uso di bandiere con espressioni regolari

Come ho accennato nell'introduzione, una caratteristica più importante delle espressioni regolari è l'uso di flag speciali per modificare il modo in cui viene eseguita una ricerca. I flag sono facoltativi, ma puoi usarli per fare cose come fare una ricerca globale o maiuscole e minuscole.

Questi sono i quattro flag comunemente usati per cambiare il modo in cui JavaScript cerca o sostituisce una stringa.

  • g: Questo flag eseguirà una ricerca globale invece di fermarsi dopo la prima corrispondenza.
  • io: Questo flag eseguirà una ricerca senza verificare una corrispondenza esatta del caso. Ad esempio, Apple, aPPLe e apPLE vengono trattati allo stesso modo durante le ricerche senza distinzione tra maiuscole e minuscole.
  • m: Questo flag eseguirà una ricerca su più righe.
  • y: Questo flag cercherà una corrispondenza nell'indice indicato dal lastIndex proprietà.

Ecco alcuni esempi di espressioni regolari utilizzate con le bandiere:

"Ho mangiato mele, hai mangiato mele". Posto (/ mele /, "manghi"); // "Mangiavo i manghi, mangiavi le mele" "Mangiavo le mele, mangiavi le mele". Posto (/ mele / g, "manghi"); // "Mangio i manghi, hai mangiato i manghi" "Ho mangiato le mele, hai mangiato le mele". Posto (/ mele /, "manghi"); // "Mangiai manghi, mangiavi MELE" "Mangiavo mele, mangiavi MELE". Posto (/ mele / gi, "manghi"); // "Mangio i manghi, hai mangiato i mango" var stickyRegex = / apples / y; stickyRegex.lastIndex = 3; "Ho mangiato mele, hai mangiato mele". Posto (stickyRegex, "manghi"); // "Ho mangiato mele, hai mangiato mele" var stickyRegex = / mele / y; stickyRegex.lastIndex = 6; "Ho mangiato mele, hai mangiato mele". Posto (stickyRegex, "manghi"); // "Mangio i manghi, hai mangiato le mele" var stickyRegex = / apples / y; stickyRegex.lastIndex = 8; "Ho mangiato mele, hai mangiato mele". Posto (stickyRegex, "manghi"); // "Ho mangiato mele, hai mangiato mele"

Pensieri finali

Lo scopo di questo tutorial era quello di farti conoscere le espressioni regolari in JavaScript e la loro importanza. Abbiamo iniziato con le nozioni di base e poi abbiamo coperto il backslash e altri caratteri speciali. Abbiamo anche imparato come verificare la presenza di uno schema ripetuto in una stringa e come ricordare corrispondenze parziali in uno schema per poterle utilizzare successivamente.

Infine, abbiamo appreso le bandiere di uso comune che rendono le espressioni regolari ancora più potenti. Puoi saperne di più sulle espressioni regolari in questo articolo su MDN.

.