Corrispondenza di Pattern in JavaScript con le Espressioni Regolari: Una Guida Completa

Le espressioni regolari (regex) sono un potente strumento per la corrispondenza di pattern e la manipolazione del testo in JavaScript. Permettono agli sviluppatori di cercare, validare e trasformare stringhe basandosi su pattern definiti. Questa guida fornisce una panoramica completa delle espressioni regolari in JavaScript, coprendo la sintassi, l'uso e le tecniche avanzate.

Cosa sono le Espressioni Regolari?

Un'espressione regolare è una sequenza di caratteri che definisce un pattern di ricerca. Questi pattern sono usati per trovare corrispondenze e manipolare stringhe. Le espressioni regolari sono ampiamente utilizzate nella programmazione per compiti come:

• Validazione dei Dati: Assicurare che l'input dell'utente sia conforme a formati specifici (es. indirizzi email, numeri di telefono).
• Estrazione dei Dati: Recuperare informazioni specifiche dal testo (es. estrarre date, URL o prezzi).
• Cerca e Sostituisci: Trovare e sostituire testo basato su pattern complessi.
• Elaborazione del Testo: Dividere, unire o trasformare stringhe basandosi su regole definite.

Creare Espressioni Regolari in JavaScript

In JavaScript, le espressioni regolari possono essere create in due modi:

1. Usando un letterale di espressione regolare: Racchiudere il pattern tra barre oblique (/).
2. Usando il costruttore RegExp: Creare un oggetto RegExp con il pattern come stringa.

Esempio:

// Usando un letterale di espressione regolare
const regexLiteral = /hello/;

// Usando il costruttore RegExp
const regexConstructor = new RegExp("hello");

La scelta tra i due metodi dipende dal fatto che il pattern sia noto al momento della compilazione o generato dinamicamente. Usa la notazione letterale quando il pattern è fisso e noto in anticipo. Usa il costruttore quando il pattern deve essere costruito programmaticamente, specialmente quando si incorporano variabili.

Sintassi Base delle Regex

Le espressioni regolari sono costituite da caratteri che rappresentano il pattern da abbinare. Ecco alcuni componenti fondamentali delle regex:

• Caratteri Letterali: Corrispondono ai caratteri stessi (es. /a/ corrisponde al carattere 'a').
• Metacaratteri: Hanno significati speciali (es. ., ^, $, *, +, ?, [], {}, (), \, |).
• Classi di Caratteri: Rappresentano insiemi di caratteri (es. [abc] corrisponde a 'a', 'b', o 'c').
• Quantificatori: Specificano quante volte un carattere o un gruppo deve apparire (es. *, +, ?, {n}, {n,}, {n,m}).
• Ancore: Corrispondono a posizioni nella stringa (es. ^ corrisponde all'inizio, $ corrisponde alla fine).

Metacaratteri Comuni:

• . (punto): Corrisponde a qualsiasi singolo carattere eccetto il newline.
• ^ (accento circonflesso): Corrisponde all'inizio della stringa.
• $ (dollaro): Corrisponde alla fine della stringa.
• * (asterisco): Corrisponde a zero o più occorrenze del carattere o gruppo precedente.
• + (più): Corrisponde a una o più occorrenze del carattere o gruppo precedente.
• ? (punto interrogativo): Corrisponde a zero o una occorrenza del carattere o gruppo precedente. Usato per caratteri opzionali.
• [] (parentesi quadre): Definisce una classe di caratteri, corrispondendo a qualsiasi singolo carattere tra le parentesi.
• {} (parentesi graffe): Specifica il numero di occorrenze da abbinare. {n} corrisponde esattamente n volte, {n,} corrisponde n o più volte, {n,m} corrisponde tra n e m volte.
• () (parentesi tonde): Raggruppa i caratteri e cattura la sottostringa corrispondente.
• \ (backslash): Esegue l'escape dei metacaratteri, permettendo di abbinarli letteralmente.
• | (pipe): Agisce come un operatore "or", abbinando l'espressione prima o dopo di esso.

Classi di Caratteri:

• [abc]: Corrisponde a uno qualsiasi dei caratteri a, b, o c.
• [^abc]: Corrisponde a qualsiasi carattere che *non* sia a, b, o c.
• [a-z]: Corrisponde a qualsiasi lettera minuscola dalla a alla z.
• [A-Z]: Corrisponde a qualsiasi lettera maiuscola dalla A alla Z.
• [0-9]: Corrisponde a qualsiasi cifra da 0 a 9.
• [a-zA-Z0-9]: Corrisponde a qualsiasi carattere alfanumerico.
• \d: Corrisponde a qualsiasi cifra (equivalente a [0-9]).
• \D: Corrisponde a qualsiasi carattere non numerico (equivalente a [^0-9]).
• \w: Corrisponde a qualsiasi carattere di parola (alfanumerico più underscore; equivalente a [a-zA-Z0-9_]).
• \W: Corrisponde a qualsiasi carattere non di parola (equivalente a [^a-zA-Z0-9_]).
• \s: Corrisponde a qualsiasi carattere di spaziatura (spazio, tab, newline, ecc.).
• \S: Corrisponde a qualsiasi carattere non di spaziatura.

Quantificatori:

• *: Corrisponde all'elemento precedente zero o più volte. Ad esempio, a* corrisponde a "", "a", "aa", "aaa", e così via.
• +: Corrisponde all'elemento precedente una o più volte. Ad esempio, a+ corrisponde a "a", "aa", "aaa", ma non a "".
• ?: Corrisponde all'elemento precedente zero o una volta. Ad esempio, a? corrisponde a "" o "a".
• {n}: Corrisponde all'elemento precedente esattamente *n* volte. Ad esempio, a{3} corrisponde a "aaa".
• {n,}: Corrisponde all'elemento precedente *n* o più volte. Ad esempio, a{2,} corrisponde a "aa", "aaa", "aaaa", e così via.
• {n,m}: Corrisponde all'elemento precedente tra *n* e *m* volte (incluso). Ad esempio, a{2,4} corrisponde a "aa", "aaa", o "aaaa".

Ancore:

• ^: Corrisponde all'inizio della stringa. Ad esempio, ^Hello corrisponde a stringhe che *iniziano* con "Hello".
• $: Corrisponde alla fine della stringa. Ad esempio, World$ corrisponde a stringhe che *finiscono* con "World".
• \b: Corrisponde a un confine di parola. Questa è la posizione tra un carattere di parola (\w) e un carattere non di parola (\W) o l'inizio o la fine della stringa. Ad esempio, \bword\b corrisponde all'intera parola "word".

Flag:

I flag delle regex modificano il comportamento delle espressioni regolari. Sono aggiunti alla fine del letterale della regex o passati come secondo argomento al costruttore RegExp.

• g (global): Trova tutte le occorrenze del pattern, non solo la prima.
• i (ignore case): Esegue una corrispondenza senza distinzione tra maiuscole e minuscole.
• m (multiline): Abilita la modalità multilinea, dove ^ e $ corrispondono all'inizio e alla fine di ogni riga (separata da \n).
• s (dotAll): Permette al punto (.) di corrispondere anche ai caratteri di newline.
• u (unicode): Abilita il supporto completo per Unicode.
• y (sticky): Esegue la corrispondenza solo a partire dall'indice indicato dalla proprietà lastIndex della regex.

Metodi Regex di JavaScript

JavaScript fornisce diversi metodi per lavorare con le espressioni regolari:

• test(): Verifica se una stringa corrisponde al pattern. Restituisce true o false.
• exec(): Esegue una ricerca per una corrispondenza in una stringa. Restituisce un array contenente il testo corrispondente e i gruppi catturati, o null se non viene trovata alcuna corrispondenza.
• match(): Restituisce un array contenente i risultati della corrispondenza di una stringa con un'espressione regolare. Si comporta diversamente con e senza il flag g.
• search(): Cerca una corrispondenza in una stringa. Restituisce l'indice della prima corrispondenza, o -1 se non viene trovata alcuna corrispondenza.
• replace(): Sostituisce le occorrenze di un pattern con una stringa di sostituzione o una funzione che restituisce la stringa di sostituzione.
• split(): Divide una stringa in un array di sottostringhe basato su un'espressione regolare.

Esempi di Utilizzo dei Metodi Regex:

// test()
const regex = /hello/;
const str = "hello world";
console.log(regex.test(str)); // Output: true

// exec()
const regex2 = /hello (\w+)/;
const str2 = "hello world";
const result = regex2.exec(str2);
console.log(result); // Output: ["hello world", "world", index: 0, input: "hello world", groups: undefined]

// match() con il flag 'g'
const regex3 = /\d+/g; // Corrisponde a una o più cifre globalmente
const str3 = "There are 123 apples and 456 oranges.";
const matches = str3.match(regex3);
console.log(matches); // Output: ["123", "456"]

// match() senza il flag 'g'
const regex4 = /\d+/;
const str4 = "There are 123 apples and 456 oranges.";
const match = str4.match(regex4);
console.log(match); // Output: ["123", index: 11, input: "There are 123 apples and 456 oranges.", groups: undefined]

// search()
const regex5 = /world/;
const str5 = "hello world";
console.log(str5.search(regex5)); // Output: 6

// replace()
const regex6 = /world/;
const str6 = "hello world";
const newStr = str6.replace(regex6, "JavaScript");
console.log(newStr); // Output: hello JavaScript

// replace() con una funzione
const regex7 = /(\d+)-(\d+)-(\d+)/;
const str7 = "Today's date is 2023-10-27";
const newStr2 = str7.replace(regex7, (match, year, month, day) => {
  return `${day}/${month}/${year}`;
});
console.log(newStr2); // Output: Today's date is 27/10/2023

// split()
const regex8 = /, /;
const str8 = "apple, banana, cherry";
const arr = str8.split(regex8);
console.log(arr); // Output: ["apple", "banana", "cherry"]

Tecniche Regex Avanzate

Gruppi di Cattura:

Le parentesi () sono usate per creare gruppi di cattura nelle espressioni regolari. I gruppi di cattura permettono di estrarre parti specifiche del testo corrispondente. I metodi exec() e match() restituiscono un array dove il primo elemento è l'intera corrispondenza, e gli elementi successivi sono i gruppi catturati.

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match[0]); // Output: 2023-10-27 (L'intera corrispondenza)
console.log(match[1]); // Output: 2023 (Il primo gruppo catturato - anno)
console.log(match[2]); // Output: 10 (Il secondo gruppo catturato - mese)
console.log(match[3]); // Output: 27 (Il terzo gruppo catturato - giorno)

Gruppi di Cattura Nominativi:

ES2018 ha introdotto i gruppi di cattura nominativi, che permettono di assegnare nomi ai gruppi di cattura usando la sintassi (?...). Questo rende il codice più leggibile e manutenibile.

const regex = /(?\d{4})-(?\d{2})-(?\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match.groups.year);  // Output: 2023
console.log(match.groups.month); // Output: 10
console.log(match.groups.day);   // Output: 27

Gruppi Non di Cattura:

Se hai bisogno di raggruppare parti di una regex senza catturarle (ad esempio, per applicare un quantificatore a un gruppo), puoi usare un gruppo non di cattura con la sintassi (?:...). Questo evita l'allocazione di memoria non necessaria per i gruppi catturati.

const regex = /(?:https?:\/\/)?([\w\.]+)/; // Corrisponde a un URL ma cattura solo il nome del dominio
const url = "https://www.example.com/path";
const match = regex.exec(url);

console.log(match[1]); // Output: www.example.com

Lookaround:

I lookaround sono asserzioni di larghezza zero che trovano una corrispondenza in una posizione di una stringa basata su un pattern che precede (lookbehind) o segue (lookahead) quella posizione, senza includere il pattern del lookaround nella corrispondenza stessa.

• Lookahead Positivo: (?=...) Trova una corrispondenza se il pattern all'interno del lookahead *segue* la posizione corrente.
• Lookahead Negativo: (?!...) Trova una corrispondenza se il pattern all'interno del lookahead *non segue* la posizione corrente.
• Lookbehind Positivo: (?<=...) Trova una corrispondenza se il pattern all'interno del lookbehind *precede* la posizione corrente.
• Lookbehind Negativo: (? Trova una corrispondenza se il pattern all'interno del lookbehind *non precede* la posizione corrente.

// Lookahead Positivo: Ottieni il prezzo solo se seguito da USD
const regex = /\d+(?= USD)/;
const text = "The price is 100 USD";
const match = text.match(regex);
console.log(match); // Output: ["100"]

// Lookahead Negativo: Ottieni la parola solo se non seguita da un numero
const regex2 = /\b\w+\b(?! \d)/;
const text2 = "apple 123 banana orange 456";
const matches = text2.match(regex2);
console.log(matches); // Output: null perché match() restituisce solo la prima corrispondenza senza il flag 'g', che non è ciò di cui abbiamo bisogno.
// per risolvere:
const regex3 = /\b\w+\b(?! \d)/g;
const text3 = "apple 123 banana orange 456";
const matches3 = text3.match(regex3);
console.log(matches3); // Output: [ 'banana' ]

// Lookbehind Positivo: Ottieni il valore solo se preceduto da $
const regex4 = /(?<=\$)\d+/;
const text4 = "The price is $200";
const match4 = text4.match(regex4);
console.log(match4); // Output: ["200"]

// Lookbehind Negativo: Ottieni la parola solo se non preceduta dalla parola 'not'
const regex5 = /(?

const regex = /([a-z]+) \1/;
const text = "hello hello world";
const match = regex.exec(text);
console.log(match); // Output: ["hello hello", "hello", index: 0, input: "hello hello world", groups: undefined]

const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

console.log(emailRegex.test("test@example.com"));    // Output: true
console.log(emailRegex.test("invalid-email"));       // Output: false
console.log(emailRegex.test("test@sub.example.co.uk")); // Output: true

const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
const text = "Visit our website at https://www.example.com or check out http://blog.example.org.";
const urls = text.match(urlRegex);
console.log(urls); // Output: ["https://www.example.com", "http://blog.example.org"]

const csvString = 'John,Doe,"123, Main St",New York';
const csvRegex = /(?:"([^"]*(?:""[^"]*)*)")|([^,]+)/g; // Regex CSV corretta
let values = [];
let match;  

while (match = csvRegex.exec(csvString)) {
  values.push(match[1] ? match[1].replace(/""/g, '"') : match[2]);
}


console.log(values); // Output: ["John", "Doe", "123, Main St", "New York"]

const phoneRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
console.log(phoneRegex.test("+1 555 123 4567")); // Output: true (Esempio USA)
console.log(phoneRegex.test("+44 20 7946 0500")); // Output: true (Esempio UK)
console.log(phoneRegex.test("+81 3 3224 5000"));  // Output: true (Esempio Giappone)
console.log(phoneRegex.test("123-456-7890"));   // Output: false

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

console.log(passwordRegex.test("P@ssword123")); // Output: true
console.log(passwordRegex.test("password"));       // Output: false (nessuna maiuscola o numero)
console.log(passwordRegex.test("Password"));       // Output: false (nessun numero)
console.log(passwordRegex.test("Pass123"));        // Output: false (nessuna minuscola)
console.log(passwordRegex.test("P@ss1"));          // Output: false (meno di 8 caratteri)