Pattern e Flag delle Regex in JavaScript

Introduzione ai Pattern e alle Flag in JavaScript

Le espressioni regolari (regex) sono strumenti essenziali in JavaScript per la ricerca di pattern e la validazione dei dati. Una regex è composta da due parti: un pattern (cosa cercare) e delle flag opzionali (come effettuare la ricerca). Questa guida spiega come creare una regex, ogni token di pattern e flag, e i metodi di string/regex che li mettono in pratica. Per una panoramica più ampia, consulta il capitolo su JavaScript RegExp.

Creare un'Espressione Regolare

JavaScript offre due modi per costruire un'espressione regolare.

1. Letterale regex — scritto tra barre oblique, con le flag dopo la barra di chiusura. Il motore lo compila una volta al caricamento dello script, quindi è la forma più veloce e comune:

2. Costruttore new RegExp() — accetta il pattern come string e le flag come secondo argomento string. Utilizzalo quando il pattern viene costruito a runtime (ad esempio dall'input dell'utente), poiché un letterale non può contenere variabili.

Lista dei Pattern Comuni

Ecco alcuni pattern comunemente utilizzati:

• \w: Corrisponde a qualsiasi carattere di parola (carattere alfanumerico più underscore). Equivalente a [a-zA-Z0-9_].
• \W: Corrisponde a qualsiasi carattere non di parola. Equivalente a [^a-zA-Z0-9_].
• \d: Corrisponde a qualsiasi cifra. Equivalente a [0-9].
• \D: Corrisponde a qualsiasi carattere non numerico. Equivalente a [^0-9].
• \s: Corrisponde a qualsiasi carattere di spazio bianco (spazi, tabulazioni, interruzioni di riga).
• \S: Corrisponde a qualsiasi carattere non di spazio bianco. Equivalente a [^\s].
• .: Corrisponde a qualsiasi carattere eccetto il carattere di nuova riga (\n).
• ^: Asserisce la posizione all'inizio di una riga.
• $: Asserisce la posizione alla fine di una riga.
• \b: Corrisponde a un confine di parola (posizione tra un carattere di parola e un carattere non di parola).
• \B: Corrisponde a una posizione che non è un confine di parola.
• \t: Corrisponde a un carattere di tabulazione.
• \n: Corrisponde a un carattere di nuova riga.
• \r: Corrisponde a un carattere di ritorno a capo.
• \\: Corrisponde a un backslash letterale.
• \f: Corrisponde a un carattere di avanzamento modulo.
• \v: Corrisponde a un carattere di tabulazione verticale.
• [abc]: Corrisponde a qualsiasi singolo carattere tra le parentesi.
• [^abc]: Corrisponde a qualsiasi singolo carattere non presente tra le parentesi.
• a|b: Corrisponde ad a oppure b.
• (abc): Corrisponde alla sequenza esatta abc.
• a?: Corrisponde ad a zero o una volta.
• a*: Corrisponde ad a zero o più volte.
• a+: Corrisponde ad a una o più volte.
• a{3}: Corrisponde esattamente a 3 occorrenze di a.
• a{3,}: Corrisponde a 3 o più occorrenze di a.
• a{3,5}: Corrisponde da 3 a 5 occorrenze di a.
• (?i): Non supportato in JavaScript. Usa invece la flag i.
• (?:...): Gruppo non catturante.
• (?=...): Asserzione lookahead positiva.
• (?!...): Asserzione lookahead negativa.
• (?<=...): Asserzione lookbehind positiva.
• (?<!...): Asserzione lookbehind negativa.

Comprendere i Pattern

Il pattern della regex è racchiuso tra barre oblique (/pattern/flags).

Esempio: /H.llo/g

• Pattern: H.llo corrisponde a qualsiasi string che inizia con 'H', seguita da qualsiasi singolo carattere (.), e che termina con 'llo'.
• Flag: g indica una ricerca globale.
• Quantificatore: . corrisponde esattamente a un carattere.

I pattern nelle espressioni regolari vengono utilizzati per definire la string che si sta cercando. Questi pattern possono includere vari caratteri, classi di caratteri e simboli speciali.

Vediamo ora alcuni esempi:

Esempio 1:

1. Pattern: \d+ corrisponde a uno o più caratteri numerici (\d+).
2. Flag: g indica una ricerca globale.
3. Quantificatore: + corrisponde a una o più occorrenze dell'elemento precedente (\d).

Esempio 2:

1. Pattern: \D+ corrisponde a uno o più caratteri non numerici (\D+).
2. Flag: g indica una ricerca globale.
3. Quantificatore: + corrisponde a una o più occorrenze dell'elemento precedente (\D).

Quantificatori

I quantificatori definiscono quante istanze di un carattere, gruppo o classe di caratteri devono essere presenti nell'input affinché si trovi una corrispondenza. Ecco alcuni quantificatori comunemente utilizzati con esempi:

• + - Corrisponde a una o più occorrenze dell'elemento precedente.

Questo pattern corrisponde a sequenze di una o più cifre.

• * - Corrisponde a zero o più occorrenze dell'elemento precedente.

Questo pattern corrisponde a sequenze di zero o più caratteri di parola.

• ? - Corrisponde a zero o una occorrenza dell'elemento precedente.

Questo pattern corrisponde a 'color' o 'colour'.

• {n} - Corrisponde esattamente a n occorrenze dell'elemento precedente.

Questo pattern corrisponde esattamente a tre cifre.

• {n,} - Corrisponde a n o più occorrenze dell'elemento precedente.

Questo pattern corrisponde a sequenze di due o più cifre.

• {n,m} - Corrisponde da n a m occorrenze dell'elemento precedente.

Questo pattern corrisponde a sequenze da due a tre cifre.

Flag

Le flag sono parametri opzionali che modificano il modo in cui il pattern viene applicato. Puoi combinarle in qualsiasi ordine (ad esempio /abc/gi). Ecco l'elenco completo:

Flag	Nome	Effetto
g	Globale	Trova tutte le corrispondenze, non solo la prima.
i	Ignora maiuscole/minuscole	Corrisponde indipendentemente dalle maiuscole o minuscole.
m	Multiriga	^ e $ corrispondono all'inizio/fine di ogni riga.
s	DotAll	. corrisponde anche ai caratteri di nuova riga.
u	Unicode	Tratta il pattern come punti di codice Unicode; abilita \u{...} e \p{...}.
y	Sticky	Corrisponde solo alla posizione esatta indicata da lastIndex.
d	Indici	Aggiunge indices (posizioni di inizio/fine) ai risultati della corrispondenza.

Le sezioni seguenti dimostrano ciascuna flag:

• g - Ricerca globale.

Questa flag consente di trovare tutte le corrispondenze nella string.

• i - Ricerca senza distinzione tra maiuscole e minuscole.

Questa flag rende la ricerca insensibile alle maiuscole e minuscole.

• m - Ricerca multiriga.

Questa flag consente a ^ e $ di corrispondere all'inizio e alla fine di ogni riga nella string.

• s - Consente a . di corrispondere ai caratteri di nuova riga (nota anche come flag dotAll).

Questa flag consente al punto . di corrispondere anche ai caratteri di nuova riga.

• u - "Unicode"; tratta il pattern come una sequenza di punti di codice Unicode.

Questa flag abilita la corrispondenza Unicode completa.

• y - "Sticky"; corrisponde solo dall'indice indicato dalla proprietà lastIndex di questa espressione regolare nella string di destinazione.

Questa flag consente di avviare la ricerca da un indice specifico nella string. La flag sticky è utile per tokenizer e parser che analizzano una string posizione per posizione — consulta Flag Sticky "y", ricerca in posizione per un approfondimento.

Testare i Pattern: regexp.test()

Il metodo test() verifica se un pattern esiste all'interno di una string, restituendo true o false.

Questo codice controlla la presenza di "world" nella string.

Sostituire il Testo: str.replace()

La funzione replace() consente di modificare le string sostituendo parti di esse con nuovo testo.

Questo codice sostituisce "morning" con "evening".

Sostituire Tutto: str.replaceAll()

Il metodo replaceAll() sostituisce tutte le occorrenze di un pattern con una nuova string.

Questo codice sostituisce ogni "a" con "o".

Dividere il Testo: str.split()

Il metodo split() divide una string in un array di sottostringhe in base a un pattern.

Questo codice divide la string in corrispondenza di ogni virgola.

Cercare nel Testo: str.match()

Il metodo match() recupera le corrispondenze di un pattern all'interno di una string, utile per estrarre dati specifici.

Questo codice trova tutti i numeri nel testo.

Scorrere le Corrispondenze: regexp.exec()

Il metodo exec() restituisce una corrispondenza alla volta. Con la flag g (o y), la regex ricorda la sua posizione in lastIndex, quindi chiamare exec() in un ciclo percorre ogni corrispondenza — e a differenza di match() con g, ogni risultato include ancora l'indice della corrispondenza e i gruppi catturanti.

Iterare le Corrispondenze: str.matchAll()

matchAll() è l'alternativa moderna e più pulita al ciclo con exec(). Restituisce un iteratore di object di corrispondenza completi (inclusi i gruppi catturanti) e richiede la flag g.

Gruppi Catturanti

Le parentesi (...) creano un gruppo catturante, rendendo disponibile una parte di una corrispondenza per il riutilizzo. I gruppi possono anche essere nominati con (?<nome>...) e letti dall'object .groups — molto più leggibili degli indici numerici.

Sintassi Regex in JavaScript

Le espressioni regolari utilizzano caratteri speciali per definire i pattern. Ecco un esempio dettagliato che utilizza più elementi della sintassi regex:

Questo pattern regex scompone un URL nei suoi componenti:

• ^(\w+): Corrisponde a qualsiasi carattere di parola (equivalente a [a-zA-Z0-9_]) all'inizio, rappresentando il protocollo.
• :\/\/: Corrisponde letteralmente a "://".
• ([\w.-]+): Corrisponde a uno o più caratteri di parola, punti o trattini, rappresentando il dominio.
• \/(\S*)$: Corrisponde a una barra obliqua seguita da qualsiasi carattere non di spazio bianco fino alla fine, rappresentando il percorso.

Ulteriori Dettagli:

Questo codice JavaScript verifica se un indirizzo web corrisponde a un pattern dettagliato.

• Impostazione del pattern: Il pattern è strutturato per catturare diversi componenti di un indirizzo web: il protocollo (come "https"), il nome di dominio (come "www.w3docs.com") e il percorso (tutto ciò che segue il dominio).
• Test dell'indirizzo web: Il codice verifica "https://www.w3docs.com/pathname/?search=test" rispetto a questo pattern.
• Visualizzazione del risultato: Se l'indirizzo web corrisponde, il codice restituisce le parti che corrispondono al pattern.

Risultato Atteso: L'output è un array con i seguenti elementi:

1. L'intero indirizzo web: "https://www.w3docs.com/pathname/?search=test".
2. Il protocollo utilizzato: "https".
3. Il nome di dominio: "www.w3docs.com".
4. Il percorso e la query string: "pathname/?search=test".

Applicazioni Pratiche di Pattern e Flag

Le regex vengono utilizzate in vari scenari per migliorare le applicazioni JavaScript:

Validare l'Input dell'Utente

Le regex aiutano a garantire che gli input degli utenti soddisfino determinati criteri, fondamentali per la qualità dei dati e la sicurezza.

Questo codice verifica se il nome utente è composto da 3 a 16 caratteri alfanumerici o underscore.

Estrarre Informazioni

Le regex possono estrarre in modo efficiente informazioni specifiche da testi o set di dati di grandi dimensioni.

Questo codice JavaScript estrae una specifica informazione da una string di testo.

• Definire il testo: Il codice inizia con una string chiamata data che contiene i dettagli di un ordine, incluso un ID ordine e una data.
• Impostazione del pattern: Utilizza un pattern (idPattern) per cercare la frase "Order ID:" seguita da una serie di cifre. Questo pattern è progettato per catturare la parte numerica subito dopo "Order ID:".
• Estrazione dell'ID ordine: Il codice cerca nella string data una corrispondenza con idPattern. Quando trova una corrispondenza, recupera solo la parte numerica (ignorando il testo "Order ID:"), che rappresenta l'ID dell'ordine.
• Visualizzazione del risultato: Poi stampa questo ID ordine sulla console.

Conclusione

Padroneggiare i pattern e le flag regex in JavaScript è fondamentale per gestire efficacemente la manipolazione del testo, la validazione dei dati e le operazioni di ricerca. Questi strumenti rendono le tue applicazioni JavaScript più robuste, efficienti e intuitive. Per approfondire, continua con le classi di caratteri, gli ancoraggi, i quantificatori e i gruppi catturanti.

Esercitazione