Espressioni regolari in JavaScript
Un'espressione regolare (o regex) è una sequenza di caratteri che possiamo usare per individuare e manipolare determinati elementi all'interno di una stringa. Possiamo quindi:
-
Cercare un testo in una stringa
-
Sostituire sottostringhe in una stringa
-
Estrarre informazioni da una stringa
💡 Il flavor delle regex di JavaScript fa parte dello standard ECMA-262 per il linguaggio. Questo significa che non devi preoccuparti della compatibilità specifica dei vari browser.
Come creare le espressioni regolari
In JavaScript, un'espressione regolare si scrive per lo più nel formato /pattern/modifiers.
Esistono due modi per creare un'espressione regolare:
-
Letterale di espressione regolare:
const regex = /[a-z]/;
- Costruttore RegExp:
const regex = new RegExp('[a-z]');
In entrambi i casi, JavaScript crea un oggetto a partire dalla regex. Si consiglia di usare pattern immutabili, preferendo il letterale come impostazione predefinita.
Il costruttore RegExp può essere usato nei casi in cui la regex cambierà o non la conosciamo ancora (come un input).
🏴☠️ Flag
Le espressioni regolari hanno dei superpoteri opzionali chiamati flags che consentono funzionalità aggiuntive.
Alcuni dei più usati sono:
-
/g: Ricerca globale
-
/i: Senza distinzione tra maiuscole e minuscole
-
/m: Ricerca multilinea
Ecco un semplice esempio:
const re = /home/gi;
const str = 'Home, sweet home.';
const myArray = str.match(re);
console.log(myArray);
=> // ["Home", "home"]
Il carattere g ci permette di individuare tutte le possibili corrispondenze all'interno di una stringa. Senza questa funzionalità, JavaScript avrebbe estratto solo la prima corrispondenza di Home.
Il flag /i per ignorare maiuscole e minuscole ci rende più flessibili nella ricerca di un pattern. Così non importa se quello che stiamo cercando è scritto in UPPERCASE o lowercase.
Quando si usa il costruttore RegExp, la sintassi per aggiungere i flag è diversa.
let regex = /[a-z]/gi; // literal notation
let regex = new RegExp('[a-z]', 'gi'); // constructor with string pattern as first argument
let regex = new RegExp(/[a-z]/, 'gi'); // constructor with regular expression literal as first argument (Starting with ECMAScript 6)
Le funzioni più comuni
Quando le espressioni regolari si combinano con le funzioni native di JavaScript, abbiamo a disposizione modi potenti per manipolare le stringhe ed estrarne i dati.
Queste sono alcune delle funzioni più comuni usate insieme alle regex.
Test
Il metodo test() esegue una ricerca per trovare una 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
Con il metodo match(), otteniamo un array utile il cui contenuto dipende dalla presenza o dall'assenza delle corrispondenze trovate.
In questo modo, siamo in grado sia di cercare che di estrarre informazioni da qualsiasi stringa. Ad 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: 11, input: "If you see someone crying, ask if it is because of their haircut.", groups: undefined]
funnyQuote.match(regex2);
// => null
Quando è presente il flag di ricerca globale /g, invece di ottenere solo la 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 di sostituirlo con un nuovo valore desiderato.
string.replace(searchValue, newValue);
Il pattern con cui cercare 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 nella posizione di 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"
Split
Il metodo split() di JavaScript rappresenta un modo diverso di usare e manipolare le stringhe con le espressioni regolari.
In questo modo, useremo le 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']
Esercizio di apprendimento
