Espressioni regolari in

Informazioni su Espressioni regolari

Le espressioni regolari in JavaScript

Un'espressione regolare (o regex) è una sequenza di caratteri che possiamo usare per individuare e manipolare determinati elementi all'interno delle stringhe. Possiamo quindi:

• Cercare un testo in una stringa
• Sostituire sottostringhe in una stringa
• Estrarre informazioni da una stringa

Questo concetto si concentra sull'uso delle espressioni regolari in JavaScript. Se vuoi imparare a scrivere le espressioni regolari, Eloquent JavaScript può essere una buona risorsa.

💡 La variante regex di JavaScript fa parte dello standard ECMA-262 del linguaggio. Questo significa che non devi preoccuparti della compatibilità specifica dei browser.

Come creare le espressioni regolari

In JavaScript, le espressioni regolari si scrivono per lo più nel formato /pattern/modifiers, dove «pattern» è la regex principale e «modifiers» è una serie di caratteri che possiamo aggiungere per indicare opzioni speciali (come dei superpoteri).

Abbiamo comunque due modi per creare un'espressione regolare:

1. Espressione regolare letterale:

const regex = /[a-z]/;

1. Costruttore RegExp:

const regex = new RegExp('[a-z]');

In entrambi i casi, JavaScript crea un oggetto a partire dalla regex. L'approccio consigliato è usare pattern immutabili, con il letterale come scelta predefinita.

Il costruttore RegExp si può usare nei casi in cui la regex cambierà o non la conosciamo ancora (come un input).

🏴‍☠️ I flag

Le espressioni regolari hanno dei superpoteri opzionali chiamati flags, che consentono funzionalità aggiuntive. Questi flag si possono usare separatamente o insieme, in qualsiasi ordine, e fanno parte dell'espressione regolare.

Alcuni dei più usati sono:

• /g: ricerca globale
• /i: ricerca senza distinzione tra maiuscole e minuscole
• /m: ricerca multilinea

Ecco un semplice esempio:

const re = /home/gi;
const str = 'Home, sweet home.';

str.match(re);

// => ["Home", "home"]

Il carattere g ci permette di trovare tutte le possibili corrispondenze all'interno di una stringa. Senza questa funzionalità, JavaScript estrarrebbe solo la prima corrispondenza Home.

Il flag /i, che ignora maiuscole e minuscole, ci permette di essere flessibili nella ricerca di un pattern. In questo modo non importa se quello che cerchiamo è in UPPERCASE o lowercase.

Quando si usa il costruttore RegExp, la sintassi per aggiungere i flag è diversa. In questo caso, basta passare i flag come secondo argomento.

Le funzioni più usate

Quando combiniamo le espressioni regolari con le funzioni integrate di JavaScript, abbiamo a disposizione strumenti potenti per manipolare le stringhe e ricavarne dati.

Il metodo test() è un ottimo modo per cercare e scoprire se un valore esiste all'interno di una determinata stringa. In questo modo restituisce un valore booleano, true o false.

Il metodo match() estrae la corrispondenza dell'espressione regolare da una determinata stringa, restituendo un array con informazioni e corrispondenze.

Quando usare uno o l'altro? Usa test() quando vuoi controllare rapidamente se un valore è presente in una stringa; usa match() se ti serve quel valore o vuoi più informazioni sulla corrispondenza.

Test

Il metodo test() esegue una ricerca di corrispondenza tra un'espressione regolare e una stringa specificata. Restituisce true o false.

const str = 'It is difficult to test if you have a virus';
const result = /virus$/.test(str);

console.log(result);

// => true

Match

Ok, ma cosa succede se vogliamo ottenere i valori effettivi della ricerca dell'espressione regolare?

Invece di restituire solo un booleano, con il metodo match() otteniamo un array utile il cui contenuto dipende dalla presenza o dall'assenza delle corrispondenze trovate.

In questo modo possiamo sia cercare sia estrarre informazioni da qualsiasi stringa. Per esempio:

const funnyQuote =
  'If you see someone crying, ask if it is because of their haircut.';
const regex1 = /someone/;
const regex2 = /happy/;

funnyQuote.match(regex1);
// => ["someone", index: 3, input: "If you see someone crying, ask if it is because of their haircut.", groups: undefined]

funnyQuote.match(regex2);
// => null

Quando è presente il flag /g di ricerca globale, invece di ottenere l'unica corrispondenza insieme a informazioni utili come l'indice o l'input, il metodo restituisce tutte le occorrenze presenti nell'array:

const funnyQuote =
  'If you see someone crying, ask if it is because of their haircut.';

const regex3 = /if/gi;

funnyQuote.match(regex3);
// => ["If", "if"];

Replace

Il metodo replace() di JavaScript ci permette di cercare un valore all'interno di una determinata stringa e sostituirlo con un nuovo valore.

string.replace(searchValue, newValue);

Il pattern da cercare per la sostituzione può essere una singola stringa o un'espressione regolare.

let string = 'I like dogs!';
let result = string.replace('dogs', 'cats');

let string = 'I would love to travel to Japan';
let result = string.replace(/Japan/g, 'Hawaii');

Inoltre, possiamo applicare una funzione al posto della sostituzione per apportare ulteriori modifiche a ciascun valore.

let text = 'Say hello to the chatbot.';
let result = text.replace(/chatbot|hello/gi, function (word) {
  return word.toUpperCase();
});
// => "Say HELLO to the CHATBOT"

💡 Alla fine, la combinazione di espressioni regolari e del metodo replace() è un modo più dinamico di sostituire gli elementi. Usare una singola stringa può essere limitante.

Split

Il metodo split() di JavaScript rappresenta un modo diverso di usare e manipolare le stringhe con le espressioni regolari.

In questo modo useremo la regex per dividere una determinata stringa riconoscendo un pattern, ad esempio str.split(/[,.\s]/). Questo pattern verrà usato come separator.

const str = 'hello,user.how are.you';

const result = str.split(/[,.\s]/);

console.log(result);
// => ['hello', 'user', 'how', 'are', 'you']

Prestazioni

Per quanto riguarda le prestazioni, entrambi creano un oggetto RegExp. La differenza principale è la frequenza con cui la regex viene compilata:

• Con Regular Expression Literal: una volta sola durante l'analisi e la compilazione iniziale del codice
• Con la sintassi RegExp(): ogni volta che viene creato un nuovo oggetto.

Usare la sintassi letterale può essere un'opzione migliore non solo per le prestazioni, ma anche per semplicità e leggibilità. Per maggiori dettagli, vedi questa discussione su Stackoverflow.

1. È più corta e non ti obbliga a ragionare in termini di costruttori simili a classi.
2. Quando usi il costruttore RegExp(), devi anche fare l'escape delle virgolette e raddoppiare l'escape dei backslash. Così le espressioni regolari, già difficili da leggere e capire di natura, lo diventano ancora di più.