Articolo originale: https://www.freecodecamp.org/news/javascript-string-replace-example-with-regex/
Le espressioni regolari (chiamate anche RegEx o RegExp) sono un modo efficace per analizzare il testo. Con RegEx, puoi abbinare stringhe in modo tale che corrispondano a caratteri specifici (come ad esempio, JavaScript) o pattern (come ad esempio, NumeroStringsSimbolo - 3a&).
Il metodo .replace viene utilizzato su stringhe in JavaScript per sostituire parti di stringa con altri caratteri. È spesso usato in questo modo:
const str = 'JavaScript';
const newStr = str.replace("ava", "-");
console.log(newStr);
// J-Script
Come puoi vedere sopra, il metodo replace accetta due argomenti: la stringa da sostituire e con cosa verrebbe sostituita la stringa.
È qui che entra in gioco Regex .
L'uso di .replace visto ora è limitato: i caratteri da sostituire sono noti - "ava". E se invece fossimo interessati a un pattern? Forse, un numero, due lettere e la parola "pippo" o tre simboli usati insieme?
Il metodo .replace utilizzato con RegEx può raggiungere questo obiettivo. RegEx può essere efficacemente utilizzato per ricreare pattern. Quindi, combinando questo con .replace significa che possiamo sostituire i pattern e non solo i caratteri esatti.
Come usare RegEx con .replace in JavaScript
Per utilizzare RegEx, il primo argomento di replace verrà sostituito con la sintassi regex, ad esempio /regex/. Questa sintassi funge da modello in cui tutte le parti della stringa che hanno corrispondenza, verranno sostituite con la nuova sottostringa.
Ecco un esempio:
// corrisponde a un numero, alcuni caratteri e un altro numero
const reg = /\d.*\d/
const str = "Java3foobar4Script"
const newStr = str.replace(reg, "-");
console.log(newStr);
// "Java-Script"
La stringa 3foobar4 corrisponde al regex /\d.*\d/, quindi viene sostituita.
E se volessimo eseguire sostituzioni in più posti?
Regex offre già questa possibilità con il flag g (globale) e può essere utilizzato con replace. Ecco come:
const reg = /\d{3}/g
const str = "Java323Scr995ip4894545t";
const newStr = str.replace(reg, "");
console.log(newStr);
// JavaScrip5t
// 5 didn't pass the test :(
La regex corrisponde a parti della stringa che sono esattamente 3 numeri consecutivi. 323 è corrispondente, 995 è corrispondente, 489 è corrispondente e 454 è corrispondente. Ma l'ultimo 5 non corrisponde al modello.
Il risultato è che JavaScrip5t mostra come i modelli sono abbinati correttamente e e sostituiti con la nuova sottostringa (una stringa vuota).
È possibile utilizzare anche il flag i . Ciò significa che puoi sostituire i modelli senza distinzione tra maiuscole e minuscole. Ecco come si usa:
const reg1 = /\dA/
const reg2 = /\dA/i
const str = "Jav5ascript"
const newStr1 = str.replace(reg1, "--");
const newStr2 = str.replace(reg2, "--");
console.log(newStr1) // Jav5ascript
console.log(newStr2) // Jav--script
..5a.. non corrisponde alla prima sintassi perché RegEx fa distinzione tra maiuscole e minuscole per impostazione predefinita. Ma con l'uso del flag i, come si vede nella seconda sintassi, la stringa è come previsto, sostituita.
Come usare Split con le espressioni regolari
split usa anche RegEx. Ciò significa che puoi dividere una stringa non solo in sottostringhe che corrispondono a caratteri esatti, ma anche pattern.
Ecco una rapida occhiata:
const regex = /\d{2}a/;
const str = "Hello54 How 64aare you";
console.log(str.split(regex))
// ["Hello54 How ", "are you"]
La stringa viene separata (split) in corrispondenza di 64a perché quella sottostringa corrisponde all'espressione regolare specificata.
Nota che il flag globale - g- in split è irrilevante, a differenza del flag i e di altri flag. Questo perché split divide la stringa nei diversi punti in cui la regex trova corrispondenza.
Ricapitolando
RegEx permette di rimpiazzare (replace) le stringhe in JavaScript in maniera più efficace, potente e divertente.
Non sei limitato solo a caratteri esatti, ma puoi usare pattern e sostituzioni multiple fatte in contemporanea. In questo articolo, abbiamo visto come funzionano insieme usando alcuni esempi.
Evviva RegEx :-)