Ancore Regex ^ e $ in JavaScript

Introduzione alle ancore in JavaScript

Le ancore sono caratteri speciali nelle espressioni regolari che consentono di trovare corrispondenze con posizioni all'interno di una stringa anziché con caratteri effettivi. Le due ancore principali in JavaScript sono ^ (accento circonflesso) e $ (segno del dollaro). L'ancora ^ afferma che la corrispondenza deve iniziare dall'inizio della stringa, mentre l'ancora $ afferma che la corrispondenza deve avvenire alla fine della stringa.

Un concetto fondamentale da comprendere prima di tutto: le ancore hanno larghezza zero. Trovano corrispondenza con una posizione tra i caratteri, non con un carattere in sé, quindi non consumano mai alcun testo. Ecco perché /^abc$/ trova corrispondenza con la stringa di tre caratteri "abc" e non con una di quattro o cinque caratteri — ^ e $ non aggiungono lunghezza alla corrispondenza. La stessa proprietà consente di usare un'ancora in replace per inserire testo all'inizio o alla fine di una stringa senza rimuovere nulla:

Questa pagina tratta la ricerca di corrispondenze all'inizio e alla fine di una stringa, la combinazione di entrambe le ancore per trovare corrispondenze esatte sull'intera stringa, come il flag m (multiline) ne modifica il comportamento e come le ancore funzionano con test() e match().

L'ancora ^: trovare corrispondenze all'inizio di una stringa

L'ancora ^ viene utilizzata per verificare se una stringa inizia con un pattern specifico.

Utilizzo dell'ancora ^

In questo esempio, ^Hello garantisce che la stringa inizi con "Hello". La stringa 'Hello, world!' corrisponde al pattern, ma 'Say Hello, world!' no perché "Hello" non si trova all'inizio.

Esempio pratico: validare l'inizio di un indirizzo email

Questa regex verifica se un indirizzo email inizia con un nome utente valido. La stringa '[email protected]' corrisponde, e anche '[email protected]' corrisponde perché entrambe iniziano con un pattern di nome utente valido prima del simbolo @.

L'ancora $: trovare corrispondenze alla fine di una stringa

L'ancora $ viene utilizzata per verificare se una stringa termina con un pattern specifico.

Utilizzo dell'ancora $

In questo esempio, world!$ garantisce che la stringa termini con "world!". La stringa 'Hello, world!' corrisponde al pattern, ma 'Hello, world' no perché manca il punto esclamativo alla fine.

Esempio pratico: validare un'estensione di file

Questa regex verifica se il nome di un file termina con ".txt". La stringa 'document.txt' corrisponde, mentre 'document.pdf' no.

Combinare ^ e $ per corrispondenze esatte

Combinando ^ e $, è possibile creare una regex che trova corrispondenza con una stringa esatta, dall'inizio alla fine.

Utilizzo di entrambe le ancore

In questo esempio, ^Hello, world!$ garantisce che l'intera stringa corrisponda a "Hello, world!". Solo la stringa 'Hello, world!' corrisponde esattamente.

Esempio pratico: validare un pattern esatto

Questa regex garantisce che l'indirizzo email sia in un formato valido dall'inizio alla fine. Verifica la presenza di un nome utente valido, un simbolo "@", un nome di dominio e un dominio di primo livello.

Utilizzo delle ancore per una validazione precisa

Le ancore sono particolarmente utili per la validazione dell'input quando è necessario garantire che l'intera stringa sia conforme a un pattern. Ad esempio, è possibile usare ^ e $ per validare numeri di telefono, codici postali o qualsiasi input in formato fisso.

Esempio: validare un numero di telefono statunitense

Questa regex garantisce che il numero di telefono sia nel formato (123) 456-7890. Utilizza ^ per indicare l'inizio e $ per indicare la fine, assicurando che l'intera stringa corrisponda al pattern specificato.

Ancore e il flag Multiline (m)

Per impostazione predefinita, ^ e $ trovano corrispondenza solo con l'inizio e la fine assoluta dell'intera stringa, anche quando essa contiene interruzioni di riga. Aggiungendo il flag m (multiline) il significato cambia: ^ e $ trovano corrispondenza anche all'inizio e alla fine di ogni riga.

Senza m, /^.+$/g restituisce null perché . non trova corrispondenza con i caratteri di a capo, quindi nessuna singola riga si estende sull'intera stringa dall'inizio alla fine. Con m, ogni riga viene trovata indipendentemente. Se si lavora con input su più righe, il flag m è quasi sempre quello che si vuole — vedere Modalità multiline delle ancore, flag "m" per un approfondimento.

Ancore con test() e match()

Le ancore si comportano allo stesso modo qualunque sia il metodo chiamato; la differenza sta in ciò che ciascun metodo restituisce.

• regexp.test(str) restituisce un boolean — ideale per la validazione ("questa stringa inizia/finisce nel modo giusto?").
• str.match(regexp) restituisce il testo corrispondente (o un array con il flag g), o null quando non c'è corrispondenza — utile quando si ha anche bisogno del valore catturato.

Poiché \d+$ è ancorato alla fine, cattura il numero finale 42 e nient'altro. Quando si ha bisogno solo di una risposta sì/no, è preferibile usare test(); si ricorre a match() quando si ha bisogno di recuperare il valore.

Conclusione

Le ancore sono strumenti potenti nelle espressioni regolari JavaScript che consentono di trovare corrispondenze con posizioni all'interno di una stringa. Padroneggiando le ancore ^ e $, è possibile creare pattern precisi ed efficaci per la validazione e la manipolazione delle stringhe. Che si voglia garantire che una stringa inizi o finisca con un pattern specifico, o trovare corrispondenza con un'intera stringa in modo esatto, le ancore sono essenziali per operazioni regex robuste.

Esercizio