# Guida alle espressioni regolari Una espressione regolare (regex) è un modo per lavorare con le stringhe in modo molto performante. Formulando una espression regolare si può * cercare un testo in una stringa * sostituire sottostringhe in una stringa * estrarre informazioni da una stringa Quasi ogni linguaggio implementa le regex. Ci sono piccole differenze per ogni implementazione, ma i concetti generali valgono ovunque . Regex datano dal 1950, quanto sono state formalizzate per il primo algoritmo del genere. Sono state implementati in Unix in diverse utilites quali `grep` e `sed` e in molti text editors. JavaScript è uno del linguaggi in cul le regex sono supportate in modo nativo dal linguaggio #### difficili, ma potenti le regex possono apparire molto complesse da interpretare anche per un professionista, se non si investe abbastanza tempo per studiarle. Sono criptiche, difficili da scrivere, e da leggere e per finire difficili da manutenzionare. Ma spesso le espressioni regolari sono la sola via per eseguire manipolazioni di stringhe in modo veloce e a portata di mano Questo tutorial, vuole essere una guida di pase per conoscerle e riuscire a gestirle. ### come si presentano le regex. In JavaScript, ci sono due modi: inizializzando un oggetto regex o creandolo direttamente : ```javascript const re=new RegExp('hey') // modo lungo, via stringa const re=/hey/ // modo corto, preferibile ``` Nell'esempio sopra `hey` è chiamato il **pattern**, ed è delimitato da `/` ## come funziona. in javascript vi sono diversi modi per utilizzare le espressioni regolari su una stringa. ```javascript const re=/hey/ // funzione test console.log(re.test('questa stringa contiene hey e altre cose')) // ritorna true console.log(re.test('bla hey bla')) // true console.log(re.test('bla bla')) // false ``` in questo test si verifica se una stringa contiene la parola 'hey'. A questo punto inseriamo gli ancoraggi di inizio e fine linea, rispettivamente i caratteri `^` e `$` ```javascript /hey/.test('prova hey fine') //✅ /^hey/.test('hey prova') //✅ /^hey/.test('prova hey fine') //❌: non si trova a inizio linea /hey$/.test('prova hey fine') //❌: non si trova a fine linea /hey$/.test('prova hey') //✅: si trova a fine linea /^hey$/.test('hey') //✅ ``` Per gercare una stringa che parte con un elemento e finisce con un altro si possono utilizzare i caratteri jolly per esempio. ```javascript /^hey.*joe$/.test('hey joe') //✅ /^hey.*joe$/.test('heyjoe') //✅ /^hey.*joe$/.test('hey how are you joe') //✅ /^hey.*joe$/.test('hey joe!') //❌ ``` per cercare in un raghe si possono utilizzare le parentesi quadre: * [a-z]/ //a, b, c, ... , x, y, z * [A-Z]/ //A, B, C, ... , X, Y, Z * [a-c]/ //a, b, c * [0-9]/ //0, 1, 2, 3, ... , 8, 9 Esempio: ```javascript /[a-z]/.test('a') //✅ /[a-z]/.test('1') //❌ /[a-z]/.test('A') //❌ /[a-c]/.test('d') //❌ /[a-c]/.test('dc') //✅ ``` I ranges possono essere combinati ```javascript /[A-Za-z0-9]/ /[A-Za-z0-9]/.test('a') //✅ /[A-Za-z0-9]/.test('1') //✅ /[A-Za-z0-9]/.test('A') //✅ ``` #### cercare un elemento diverse volte Si può cercare se una stringa contiene uno e un solo carattere in un range cercandolo tra start ^ e end $: ```javascript /^[A-Z]$/.test('A') //✅ /^[A-Z]$/.test('AB') //❌ /^[A-Z]$/.test('Ab') //❌ /^[A-Za-z0-9]$/.test('1') //✅ /^[A-Za-z0-9]$/.test('A1') //❌ ``` #### negare un elemento il carattere ^ all'inizio di un pattern indica l'inizio riga, mentre in all'interno di un range nega il range stesso. ```javascript /[^A-Za-z0-9]/.test('a') //❌ /[^A-Za-z0-9]/.test('1') //❌ /[^A-Za-z0-9]/.test('A') //❌ /[^A-Za-z0-9]/.test('@') //✅ ``` ### abbreviazioni e metacaratteri - `\d` cerca un numero equivalente a `[0-9]` - `\D` cerca un non numero: `[^0-9]` - `\w` cerca un carattere alfanumerico + _: `[A-Za-z_0-9] - `\W` nega \w: `[^A-Za-z_0-9]` - `\s` spazio, tab o newline. - `\S` nega \s - `\0` cerca null (chr0) - `\n` newline - `\t` tab - `\uXXXX` unicode esadecimale. (richiede suffisso u) - `.` qualiasi carattere tranne \n - `[^]` qualsiasi carattere, anche \n Se si vogliono cercare diverse possilibilità si usa `|` (or) ```javascript /hey|ho/.test('hey') //✅ /hey|ho/.test('ho') //✅ ``` #### Quantificatori I quantificatori seguono un gruppo di ricerca e sono: - `*` : 0 o più volte - `+` : 1 o più volte - `?` : 0 o una volta - `{n}`: esattamente n volte - `{n,m}`: da n a m volte. (m può essere omesso) ```javascript // 1 o più digits /^\d+$/.test('12') //✅ /^\d+$/.test('14') //✅ /^\d+$/.test('144343') //✅ /^\d+$/.test('') //❌ /^\d+$/.test('1a') //❌ // 0 o più digits /^\d*$/.test('12') //✅ /^\d*$/.test('14') //✅ /^\d*$/.test('144343') //✅ /^\d*$/.test('') //✅ /^\d*$/.test('1a') //❌ // esattamente 3 numeri /^\d{3}$/.test('123') //✅ /^\d{3}$/.test('12') //❌ /^\d{3}$/.test('1234') //❌ // esattamente 3 lettere /^[A-Za-z0-9]{3}$/.test('Abc') //✅ // da 3 a 5 /^\d{3,5}$/.test('123') //✅ /^\d{3,5}$/.test('1234') //✅ /^\d{3,5}$/.test('12345') //✅ /^\d{3,5}$/.test('123456') //❌ // da 3 in poi /^\d{3,}$/.test('12') //❌ /^\d{3,}$/.test('123') //✅ /^\d{3,}$/.test('12345') //✅ /^\d{3,}$/.test('123456789') //✅ // opzionali /^\d{3}\w?$/ /^\d{3}\w?$/.test('123') //✅ /^\d{3}\w?$/.test('123a') //✅ /^\d{3}\w?$/.test('123ab') //❌ ``` ## Gruppi Si possono raggruppare criteri utilizzando le parentesi tonde. Questo è utile per dividere i risultati di una ricerca e per le sostituzioni Questo esempio testa 3 digits (G1) seguiti da una parola (w) ```javascript /^(\d{3})(\w+)$/.test('123') //❌ /^(\d{3})(\w+)$/.test('123s') //✅ /^(\d{3})(\w+)$/.test('123something') //✅ /^(\d{3})(\w+)$/.test('1234') //✅ /^(\d{2})+$/.test('12') //✅ /^(\d{2})+$/.test('123') //❌ /^(\d{2})+$/.test('1234') //✅ ``` Finora abbiamo visto come testare una stringa per un pattern, ma utilizzando i gruppi si ha la possibilità di catturare parti di stringa e di eseguire sostituzioni. Anzichè utilizzare la funzione test utilizzeremo le funzioni equivalenti: ```javascript String.match(RegExp) RegExp.exec(String) ``` Sono esattamente la stessa cosa, e ritornano un array con la stringa trovata e ogni gruppo separato. Se non c'è match ritorna null. ```javascript '123s'.match(/^(\d{3})(\w+)$/) //Array [ "123s", "123", "s" ] /^(\d{3})(\w+)$/.exec('123s') //Array [ "123s", "123", "s" ] 'hey'.match(/(hey|ho)/) //Array [ "hey", "hey" ] /(hey|ho)/.exec('hey') //Array [ "hey", "hey" ] /(hey|ho)/.exec('ha!') //null ``` Quando un gruppo è stato trovato più volte nella stessa ricerca viene messo nell'array soltanto l'ultimo ```javascript '123456789'.match(/(\d)+/) //Array [ "123456789", "9" ] ``` Gruppi opzionali. Un gruppo può essere fatto opzionale con (...)? . Se non trovato la sua corrispondenza porta `undefined`: ```javascript /^(\d{3})(\s)?(\w+)$/.exec('123 s') //Array [ "123 s", "123", " ", "s" ] /^(\d{3})(\s)?(\w+)$/.exec('123s') //Array [ "123s", "123", undefined, "s" ] ``` Riferimenti assegnati al gruppo A ogni gruppo è assegnto un numero: `$1` si riferisce al primo, `$1` al secondo e cosí via. questo diventa utile nelle funzioni di sostituzione Dare un nome a un gruppo Nello standard `ES2018` c'è una nuova feature per assegnare un nome a ogni gruppo. ```javascript const re = /(?\d{4})-(?\d{2})-(?\d{2})/ const result = re.exec('2015-01-02') // result.groups.year === '2015'; // result.groups.month === '01'; // result.groups.day === '02'; ``` C'è una differenza tra usare match e exec con i gruppi: ```javascript /hey|ho/.exec('hey') // [ "hey" ] /(hey).(ho)/.exec('hey ho') // [ "hey ho", "hey", "ho" ] ``` Gruppo da non catturare Se non si vuole catturare un gruppo nei risultati si può utilizzare la sintassi: `(?:...)` ```js '123s'.match(/^(\d{3})(?:\s)(\w+)$/) //null '123 s'.match(/^(\d{3})(?:\s)(\w+)$/) //Array [ "123 s", "123", "s" ] Flags ``` ### Flag globali si possono utilizzare i seguenti flag globali alla fine di una espressione regolare: - `g`: matches the pattern multiple times - `i`: makes the regex case insensitive - `m`: enables multiline mode. In this mode, ^ and $ match the start and end of the whole string. Without this, with multiline strings they match the beginning and end of each line. - `u`: enables support for unicode (introduced in ES6/ES2015) - `s`: (new in ES2018) short for single line, it causes the . to match new line characters as well I flag possono essere combinati tra da loro ```js /hey/ig.test('HEy') //✅ new RegExp('hey', 'ig').test('HEy') //✅ ``` ### Ispezionare una regex data una regex la si può ispezionare con i comandi: ```js /^(\w{3})$/i.source //"^(\\d{3})(\\w+)$" /^(\w{3})$/i.multiline //false /^(\w{3})$/i.lastIndex //0 /^(\w{3})$/i.ignoreCase //true /^(\w{3})$/i.global //false ``` ### Caratteri speciali ``` \ / [ ] ( ) { } ? + * | . ^ $ ``` per usare uno di questi bisogna prependere `\` ```js /^\\$/ /^\^$/ // /^\^$/.test('^') ✅ /^\$$/ // /^\$$/.test('$') ✅ ``` ### String boundaries `\b` e `\B` permettono di ispezionare se una stringa si trova all'inizio o alla fine di una parola rispettivamente ```js 'I saw a bear'.match(/\bbear/) //Array ["bear"] 'I saw a beard'.match(/\bbear/) //Array ["bear"] 'I saw a beard'.match(/\bbear\b/) //null 'cool_bear'.match(/\bbear\b/) //null ``` ### sostituzioni con le regex L'oggetto stringa in JS ha un metodo `replace()` che può essere utilizzato con le regex ```js "Hello world!".replace('world', 'dog') //Hello dog! "My dog is a good dog!".replace('dog', 'cat') //My cat is a good dog! "Hello world!".replace(/world/, 'dog') //Hello dog! "My dog is a good dog!".replace(/dog/g, 'cat') //My cat is a good cat! "Hello, world!".replace(/(\w+), (\w+)!/, '$2: $1!!!') // "world: Hello!!!" ``` si può anche utilizzare una funzione con tanti parametri quanti sono i gruppi trovati: ```JS "Hello, world!".replace(/(\w+), (\w+)!/, (matchedString, first, second) => { console.log(first); console.log(second); return `${second.toUpperCase()}: ${first}!!!` }) //"WORLD: Hello!!!" ``` ### Ingordigia Si dice che le regex siano per default `ingorde`. Cosa significa? prendiamo una espressione regolare come questa: `/\$(.+)\s?/` Si suppone estragga a partire dal carattere $ un numero ad esempio ```js /\$(.+)\s?/.exec('This costs $100')[1] //100 ``` ma con questo esempio non funziona: ```js /\$(.+)\s?/.exec('This costs $100 and it is less than $200')[1] //100 and it is less than $200 ``` Perchè: la regex dopo il `$` trova tutti i caratteri con `.+`, e non si ferma fino a che non va a fine riga: questo perchè `\s?` rende il carattere spazio opzionale. Per risolvere questo problema bisogna dire alla regex di essere **lazy** e trovare il numero minore possibile di soluzioni. si va questo utilizzanto il `?` dopo il quantificatore: ```js /\$(.+?)\s/.exec('This costs $100 and it is less than $200')[1] //100 ``` ### guarda avanti Trova una stringa che dipende da quello che la segue: ```js // /Roger(?=Waters)/ /Roger(?= Waters)/.test('Roger is my dog') //false /Roger(?= Waters)/.test('Roger is my dog and Roger Waters is a famous musician') //true // ?! performs the inverse operation, matching if a string is not followed by a specific substring: // /Roger(?!Waters)/ /Roger(?! Waters)/.test('Roger is my dog') //true /Roger(?! Waters)/.test('Roger Waters is a famous musician') //false ``` ### guarda indietro trova una stringa in funzione di quello che la precede ```js // /(?<=Roger) Waters/ /(?<=Roger) Waters/.test('Pink Waters is my dog') //false /(?<=Roger) Waters/.test('Roger is my dog and Roger Waters is a famous musician') //true // A lookbehind is negated using ?