JavaScript Regex (OR)

Le espressioni regolari JavaScript (RegEx) offrono potenti capacità per la corrispondenza di pattern all'interno delle stringhe. Uno dei componenti chiave delle RegEx è l'operatore OR, rappresentato dalla barra verticale (|). Questo operatore consente di includere più pattern all'interno di una singola espressione regolare, abilitando ricerche e manipolazioni di stringhe versatili ed efficienti. In questa guida completa esploreremo l'utilizzo dell'operatore OR nelle RegEx JavaScript, con esempi pratici per approfondire la comprensione.

Comprendere l'operatore OR (|) nelle RegEx

L'operatore OR nelle espressioni regolari consente di specificare più alternative per una corrispondenza. È particolarmente utile quando è necessario trovare un pattern tra diversi possibili.

Utilizzo base dell'operatore OR

La sintassi dell'operatore OR è semplice: basta inserire il simbolo | tra i pattern che si desidera far corrispondere.

In questo esempio, il pattern /cat|dog/ trova corrispondenza sia con "cat" che con "dog" nelle stringhe indicate.

Precedenza dell'alternazione: perché le parentesi sono quasi sempre necessarie

Questo è il problema più comune con |. L'operatore OR ha una precedenza molto bassa — inferiore a qualsiasi altro operatore regex. Ciò significa che | divide l'intera espressione in alternative, fino ai delimitatori circostanti o alle parentesi più vicine.

Quindi /cat|concatenate/ non significa "cat seguito opzionalmente da concatenate". Significa: trova il pattern intero cat, OPPURE trova il pattern intero concatenate. Analogamente, /^cat|dog$/ si legge come (^cat)|(dog$) — "inizia con cat" OPPURE "finisce con dog" — il che raramente è ciò che si intende.

Per limitare l'alternazione a una sola parte del pattern, racchiudi le alternative tra parentesi.

Ancorare l'intera espressione con ^ e $ è un accompagnamento comune all'alternazione raggruppata — vedi Ancoraggi: inizio e fine della stringa.

L'ordine conta: vince il primo match

Il motore regex prova le alternative da sinistra a destra e si ferma alla prima che ha successo nella posizione corrente. Non cerca la corrispondenza più lunga — solo la prima. Questo significa che l'ordine delle alternative è significativo.

Regola pratica: elenca le alternative più lunghe o specifiche prima di quelle più brevi con cui condividono un prefisso.

Raggruppamento con parentesi

Le parentesi () raggruppano parti di un'espressione regolare in modo che i quantificatori e gli altri operatori si applichino all'intero gruppo; inoltre catturano il testo corrispondente per un uso successivo (vedi Gruppi di cattura). Ciò è essenziale quando si vuole che l'OR copra solo una parte di un pattern più ampio.

Qui il quantificatore s? si applica all'intero gruppo (cat|dog), quindi il pattern trova corrispondenza con "cat", "cats", "dog" e "dogs". Il quantificatore ? e i suoi analoghi sono trattati in Quantificatori +, * e {n}.

Esempi pratici

Corrispondenza con estensioni di file diverse

Supponiamo di dover validare nomi di file con estensioni diverse come .jpg, .png o .gif.

In questo esempio, il pattern /\.(jpg|png|gif)$/ trova corrispondenza con nomi di file che terminano con ".jpg", ".png" o ".gif". Il \. iniziale corrisponde a un punto letterale, il gruppo (jpg|png|gif) è l'alternazione e $ ancora la corrispondenza alla fine della stringa.

Validazione di numeri di telefono

Considera uno scenario in cui devi validare formati diversi di numeri di telefono.

Analizzando il pattern /(\+\d{1,2}\s?)?(\(\d{3}\)|\d{3})[-.\s]?\d{3}[-.\s]?\d{4}/ pezzo per pezzo:

• (\+\d{1,2}\s?)? — un prefisso internazionale opzionale: un +, una o due cifre, poi uno spazio opzionale. Il ? finale rende l'intero gruppo opzionale.
• (\(\d{3}\)|\d{3}) — l'alternazione: tre cifre tra parentesi (123) oppure tre cifre senza parentesi 123. Nota che \( e \) sono parentesi letterali, mentre le () esterne non precedute da barra obliqua effettuano il raggruppamento.
• [-.\s]? — un separatore opzionale: un trattino, un punto o uno spazio bianco. (Queste sono classi di caratteri.)
• \d{3} — tre cifre.
• [-.\s]? — un altro separatore opzionale.
• \d{4} — le quattro cifre finali.

Alternazione semplice vs. sottopatter opzionali

Un'equivoco comune è trattare color|colour come se la u fosse opzionale. Non è così — questa è una semplice alternazione tra due parole complete.

Quando le alternative differiscono solo per un singolo carattere (o una breve sequenza), l'approccio idiomatico e più efficiente è un sottopatter opzionale con quantificatore, non l'alternazione. Il quantificatore ? rende la u precedente opzionale:

Usa l'alternazione (|) quando le scelte sono stringhe genuinamente distinte (cat|dog); usa ? quando una forma è l'altra più un frammento opzionale (colou?r).

Combinare l'operatore OR con altri metacaratteri

La potenza dell'operatore OR si amplifica quando viene combinato con altri metacaratteri delle espressioni regolari, come * (zero o più), + (uno o più), ? (zero o uno) e {} (esattamente n volte).

Esempio con quantificatori

Il pattern /\b(cat|dog)s?\b/ trova corrispondenza con "cat", "cats", "dog" e "dogs" come parole intere, usando il metacarattere di confine di parola \b.

Esempio avanzato con condizioni multiple

I due formati di data seguenti — D-M-YYYY e YYYY-M-D — usano entrambi gli stessi separatori e lo stesso numero di cifre, quindi la regex non può distinguere l'ordine giorno-mese dalla sola forma. Ciò che può distinguere è dove si trova l'anno a quattro cifre: alla fine per un formato, all'inizio per l'altro.

Questo pattern trova corrispondenza con date sia nel formato giorno-prima (12-31-2023, 31-12-2023) che anno-prima (2023-12-31). Si noti che 31-12-2023 trova corrispondenza — è una stringa \d{1,2}-\d{1,2}-\d{4} perfettamente valida, quindi la prima alternativa la accetta.

Un dettaglio sottile ma importante: poiché | ha la precedenza più bassa, ^ si lega solo alla prima alternativa e $ solo alla seconda. Per ancorare entrambe le alternative, raggruppale:

Utilizzo dell'alternazione con match(), matchAll() e replace()

test() indica solo se un pattern ha trovato corrispondenza. Per estrarre o trasformare il testo corrispondente, combina l'alternazione con i gruppi di cattura e i metodi string match(), matchAll() e replace().

match() (senza il flag g) restituisce la prima corrispondenza più ogni gruppo catturato:

Con il flag g, match() restituisce ogni corrispondenza come array, e matchAll() fornisce un iteratore di oggetti di corrispondenza completi:

replace() consente di riscrivere ciascuna alternativa. Qui normalizziamo le ortografie britanniche e americane in un'unica forma:

Conclusione

Padroneggiare l'operatore OR nelle espressioni regolari JavaScript apre un'ampia gamma di possibilità per la corrispondenza di pattern efficiente e versatile. Comprendendo come utilizzare l'operatore OR in combinazione con altre funzionalità RegEx, è possibile creare pattern potenti e flessibili per gestire ricerche e manipolazioni di stringhe complesse.

Esercitazione

Prima di rispondere, ragiona su ciascuna opzione. Ricorda che ogni opzione è sintassi regex valida — la domanda è cosa trova effettivamente corrispondenza:

• /cat|dog/ — alternazione semplice con |; trova "cat" o "dog" in qualsiasi punto di una stringa. Corretto.
• /(cat|dog)/ — stessa alternazione racchiusa in un gruppo di cattura; il gruppo non cambia ciò che trova corrispondenza, solo che la corrispondenza viene catturata. Corretto.
• /cat|dogs/ — valido, ma la seconda alternativa è "dogs" (con la s), quindi non trova mai corrispondenza con la parola "dog" da sola. Non corretto per questa domanda.
• /cat||dog/ — l'alternativa vuota tra i due simboli | trova corrispondenza con una stringa vuota, quindi questo trova corrispondenza con quasi tutto, incluse le stringhe che non contengono nessuna delle due parole. Non corretto.
• /(cat|dog)s/ — la s obbligatoria dopo il gruppo significa che trova corrispondenza con "cats" o "dogs", non con "cat" o "dog". Non corretto.
• /cat|do g/ — lo spazio è un carattere letterale, quindi la seconda alternativa è "do g" (con uno spazio), non "dog". Non corretto.