Regex in JavaScript: test, match, replace e gruppi di cattura

Una regex è un pattern per trovare testo

Le espressioni regolari descrivono la forma delle stringhe: "quattro cifre", "una parola seguita da una virgola", "qualsiasi cosa che sembri un'email". JavaScript ti offre due modi per crearne una:

const literal = /hello/i;
const built = new RegExp("hello", "i");

console.log(literal.test("Hello, world"));
console.log(built.test("HELLO"));

La forma letterale (slash intorno al pattern, flag dopo lo slash di chiusura) è quella che userai quasi sempre. Usa new RegExp(...) quando il pattern stesso è dinamico, per esempio quando lo costruisci da un input dell'utente o da una variabile.

La i alla fine è un flag. i significa senza distinzione tra maiuscole e minuscole. Tra poco parliamo meglio dei flag.

test: c'è una corrispondenza?

La domanda più rapida che puoi fare a una regex è "questa stringa contiene una corrispondenza?". Per questo c'è test:

const hasDigit = /\d/;

console.log(hasDigit.test("abc123"));
console.log(hasDigit.test("abcdef"));
console.log(hasDigit.test(""));

\d significa "una cifra qualsiasi". test restituisce true o false e nient'altro. Se ti serve solo un sì o un no (validare un campo, filtrare un array), test è lo strumento giusto.

match: estrarre il testo trovato

Quando vuoi il testo trovato vero e proprio, usa il metodo match della stringa:

const text = "Order #4521 shipped on 2024-11-03";

console.log(text.match(/\d+/));
console.log(text.match(/\d+/g));

Senza il flag g, match restituisce un array con la prima corrispondenza più alcuni metadati (indice, input). Con g, restituisce tutte le corrispondenze come semplice array di stringhe. Se non trova niente, ottieni null, non un array vuoto, quindi proteggiti di conseguenza:

const result = "no numbers here".match(/\d+/);
console.log(result ?? "no match");

I flag cambiano il comportamento del pattern

I flag vanno dopo lo slash di chiusura e modificano il modo in cui funziona la ricerca. Quelli che userai di più:

• g: globale, trova tutte le corrispondenze invece della sola prima.
• i: senza distinzione tra maiuscole e minuscole.
• m: multilinea, così ^ e $ corrispondono all'inizio e alla fine di ogni riga, non solo della stringa.
• s: dotall, così . corrisponde anche agli a capo.
• u: consapevole dell'Unicode, necessario per molte emoji e per i pattern non ASCII.

const poem = "Roses are red\nViolets are blue";

console.log(poem.match(/^\w+/));
console.log(poem.match(/^\w+/gm));

Senza m, ^ si ancora solo all'inizio assoluto della stringa. Con m, si ancora all'inizio di ogni riga, quindi vengono presi sia Roses sia Violets.

Classi di caratteri e quantificatori

I mattoni della maggior parte dei pattern:

• \d cifra, \w carattere di parola (lettera, cifra o trattino basso), \s spazio bianco.
• [abc] uno tra a, b o c. [^abc] qualsiasi cosa tranne quelli. [a-z] un intervallo.
• . qualsiasi carattere tranne l'a capo.
• * zero o più, + uno o più, ? zero o uno.
• {3} esattamente tre, {2,5} da due a cinque, {2,} due o più.
• ^ inizio, $ fine.

Tutto insieme:

const patterns = {
  phone: /^\d{3}-\d{3}-\d{4}$/,
  hex: /^#[0-9a-f]{6}$/i,
  word: /\b\w+\b/g,
};

console.log(patterns.phone.test("415-555-0132"));
console.log(patterns.hex.test("#1a2B3c"));
console.log("hello, regex world".match(patterns.word));

\b è un confine di parola: la linea invisibile tra un carattere di parola e uno che non lo è. È utile quando vuoi corrispondenze di "parola intera".

Gruppi di cattura: ricordare parti di una corrispondenza

Le parentesi creano un gruppo che cattura ciò che ha trovato. exec e match restituiscono queste catture insieme alla corrispondenza completa:

const date = /(\d{4})-(\d{2})-(\d{2})/;
const result = "today is 2024-11-03".match(date);

console.log(result[0]);
console.log(result[1]);
console.log(result[2]);
console.log(result[3]);

L'indice 0 è la corrispondenza completa, e ogni gruppo ha il suo posto dopo. Contare i gruppi per posizione diventa scomodo quando sono più di due, quindi dai loro un nome:

const date = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const { groups } = "today is 2024-11-03".match(date);

console.log(groups.year, groups.month, groups.day);

I gruppi con nome si leggono meglio nel punto in cui li usi e sopravvivono se riordini il pattern.

replace: riscrivere il testo trovato

replace riceve un pattern e una sostituzione. La sostituzione può essere una stringa o una funzione:

const text = "Contact: alice@example.com or bob@example.com";

console.log(text.replace(/@example\.com/, "@acme.io"));
console.log(text.replace(/@example\.com/g, "@acme.io"));

Senza g viene sostituita solo la prima corrispondenza. Un errore comune è dimenticare il flag e chiedersi perché la seconda email sembra ancora sbagliata.

Le stringhe di sostituzione supportano i riferimenti all'indietro. $1, $2 e così via si riferiscono ai gruppi di cattura; $<name> si riferisce a quelli con nome:

const date = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

console.log("2024-11-03".replace(date, "$<day>/$<month>/$<year>"));

Per qualsiasi cosa vada oltre una semplice sostituzione, passa una funzione. Riceve come argomenti la corrispondenza e le catture:

const prices = "Apples $3, Pears $5, Plums $2";

const doubled = prices.replace(/\$(\d+)/g, (_, n) => `$${Number(n) * 2}`);
console.log(doubled);

Il trattino basso è la corrispondenza completa (che non ci serve); n è il primo gruppo di cattura. Questo schema, regex più funzione di sostituzione, risolve la maggior parte delle manipolazioni di testo reali.

matchAll: ogni corrispondenza con i suoi gruppi

String.prototype.matchAll restituisce un iteratore di tutte le corrispondenze con i relativi gruppi di cattura, cosa che il semplice match con il flag g non sa fare:

const text = "alice@acme.io and bob@example.com";
const email = /(?<user>\w+)@(?<domain>[\w.]+)/g;

for (const m of text.matchAll(email)) {
  console.log(m.groups.user, "at", m.groups.domain);
}

matchAll richiede il flag g. Senza, ottieni un TypeError. Espandilo in un array ([...text.matchAll(email)]) se ti serve l'accesso diretto agli elementi invece dell'iterazione.

Fare l'escape dei caratteri speciali

Caratteri come . * + ? ( ) [ ] { } | \ ^ $ hanno un significato speciale in una regex. Per cercarli letteralmente, fai l'escape con una barra rovesciata:

const withDot = /example\.com/;
const withoutDot = /example.com/;

console.log(withDot.test("example.com"));
console.log(withDot.test("examplexcom"));
console.log(withoutDot.test("examplexcom"));

La versione senza escape trova examplexcom perché . significa "qualsiasi carattere". Questo tipo di bug è comune, e silenzioso. Se una regex trova troppo, cerca per prima cosa un . senza escape.

Quando costruisci un pattern da un input dell'utente, devi fare l'escape, altrimenti un utente può iniettare sintassi regex:

function escape(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

const userInput = "3.14";
const safe = new RegExp(escape(userInput));
console.log(safe.test("pi is 3.14"));
console.log(safe.test("pi is 3x14"));

$& in una stringa di sostituzione è una scorciatoia per "l'intera corrispondenza".

Lookahead e lookbehind

A volte vuoi trovare un testo solo quando è seguito (o preceduto) da qualcosa, senza includere quel qualcosa nella corrispondenza. È quello che fanno i lookaround:

const prices = "items cost 10 USD, 25 EUR, 7 GBP";

console.log(prices.match(/\d+(?= USD)/));
console.log(prices.match(/(?<=\$)\d+/));

• (?= ...) lookahead positivo: "seguito da".
• (?<= ...) lookbehind positivo: "preceduto da".
• (?! ...) e (?<! ...) sono le versioni negative.

I lookaround non consumano caratteri, quindi la parte che stai "guardando" resta disponibile per la parte successiva del pattern.

Due parole sulla validazione delle email

Te lo chiederanno spesso: "dammi una regex che validi le email". La risposta onesta è: non farlo. La vera grammatica delle email è intricata, e qualsiasi regex abbastanza corta da essere leggibile sbaglia in qualche direzione. Per validare un form, un pattern pragmatico va benissimo:

const emailish = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

console.log(emailish.test("alice@acme.io"));
console.log(emailish.test("not an email"));
console.log(emailish.test("a@b"));

Leggilo così: "alcuni caratteri che non sono spazi né @, una @, altri caratteri dello stesso tipo, un punto, altri caratteri dello stesso tipo". Intercetta gli errori di battitura evidenti senza pretendere di rispettare la RFC 5322. Per una verifica reale, invia un'email di conferma.

Errori comuni

Alcune trappole da interiorizzare:

• Dimenticare g con replace o matchAll. Solo la prima corrispondenza, oppure un TypeError.
• Lo stato di lastIndex nelle regex globali. Una regex con il flag g o y ricorda dove si era fermata tra una chiamata a test/exec e l'altra. Non riusarla su stringhe non correlate: creane una nuova, oppure usa matchAll.
• Punti e slash senza escape nei pattern dinamici. Fai sempre l'escape dell'input dell'utente prima di passarlo a new RegExp(...).
• Backtracking catastrofico. Quantificatori annidati come (a+)+ su input patologici possono bloccare una scheda. Se una regex sembra lenta, semplificala.

Prossimo passo: date e orari

Le regex gestiscono la forma del testo; i dati reali però arrivano anche con timestamp da analizzare, formattare e su cui fare calcoli. La prossima pagina parla di Date, Intl.DateTimeFormat e del modello mentale che tiene lontani i bug dei fusi orari.