Le espressioni regolari in Javascript

Espressioni regolari... espressioni regolari...
Come spiegare in poche parole cosa sono e a cosa servono?
Beh, iniziamo dicendo che le espressioni regolari sono degli insiemi di caratteri alfanumerici, che includono alcuni caratteri speciali, al fine di compiere operazioni su stringhe di testo.

Possono essere utilizzate per fare confronti, ricerche o sostituzioni di insiemi di caratteri all'interno di stringhe di testo. Un esempio pratico potete vederlo nello script per la sostituzione dei caratteri speciali che ho creato per convertire i caratteri accentati, alcuni caratteri speciali e i ritorni a capo di un normale testo con i corrispondenti codici HTML.

Una espressione regolare viene creata specificando un set di caratteri alfanumerici, eventualmente corredati di caratteri speciali, il tutto racchiuso tra dei "forward slash" (la comune barra utilizzata negli indirizzi internet, "/").

Un esempio particolarmente semplice di questo tipo di oggetti è questo:

var reg_expr_1 = /ciao/;

che coincide con la parola "ciao".

Per quanto già espressioni semplici come questa possano essere abbastanza potenti, semplici insiemi di caratteri alfanumerici non ci possono permettere di fare ricerche più complicate, ad esempio di cercare le parole che iniziano per "a", contengono un qualsiasi altro numero di caratteri al loro interno ma che finiscono per "te".

Per poter effettuare questo tipo di ricerche si deve ricorrere ad una particolare sintassi, propria delle espressioni regolari, che permette di specificare cosa di preciso vogliamo che contenga la stringa da noi ricercata.

Ecco la lista delle "classi carattere" che potete utilizzare nelle vostre espressioni regolari:

[...]	Qualsiasi dei caratteri alfanumerici inclusi tra parentesi quadre. Ad esempio [abcde] vuol dire che a noi va bene sia "a" che "b" che "c", "d" oppure "e".
[^...]	Tutti i caratteri ESCLUSI quelli tra parentesi quadre. Come avrete capito, il simbolo "^" rappresenta la negazione.
.	Qualsiasi carattere, escluso il newline (equivale a [^\n], che appunto come avete visto sopra significa 'tutto tranne il newline').
[a-z] [A-Z] [0-9]	Qualsiasi carattere minuscolo Qualsiasi carattere maiuscolo Qualsiasi cifra
\w	Qualsiasi carattere alfanumerico. Tramite quanto visto qui sopra questo è una abbreviazione per [a-zA-Z0-9]
\W	Qualsiasi carattere non alfanumerico. Equivalente a [^a-zA-Z0-9]
\s	Qualsiasi carattere di spazio
\S	Qualsiasi carattere NON di spazio
\d	Qualsiasi cifra. Equivale a [0-9]
\D	Qualsiasi carattere che non sia una cifra. Equivale a [^0-9]

Già così avremmo sufficienti mezzi per effettuare delle ricerche complesse.
Ma se volessimo cercare una parola che contenga una "a" seguita da sette cifre (qualsiasi) e che termini in "r"? Certamente una espressione regolare così /a\d\d\d\d\d\d\dr/ non è una delle soluzioni più agili, no? E se volessimo inoltre cercare una sottostringa simile alla precedente ma che può avere un numero di cifre variabili tra la "a" e la "r"?

Per fare questo ci serviamo di ulteriori metodi per indicare l'occorrenza di un elemento. Tali caratteri speciali, elencati qui sotto, si applicano all'elemento nella posizione a loro precedente, tenendo conto che se vogliamo assegnare tale proprietà a più di un elemento, dobbiamo racchiuderli tra parentesi tonde. Non vi preoccupate, adesso elenco le nuove proprietà e poi farò un giro di esempi per spiegare meglio come funziona il tutto:

{x,y}	Qualsiasi ripetizione dell'elemento precedente compresa tra x e y
{x,}	Qualsiasi ripetizione dell'elemento precedente da x in poi
{x}	Corrispondenza esatta dell'elemento precedente per x volte
?	Zero o una occorrenza dell'elemento precedente. Equivale a {0,1}
+	Una o più occorrenze dell'elemento precedente. Equivale a {1,}
*	Zero o più occorrenze dell'elemento precedente. Corrisponde a {0,}
|	OR. Specifica delle alternative. Ad esempio /ciao|salve|buongiorno/ specifica una delle tre parole "ciao", "salve" oppure "buongiorno"

Ultimissima nota: per usare i caratteri speciali nella loro normale funzione di carattere (ad esempio se volessimo cercare il più come parte di una sottostringa) è necessario fare precedere il backslash ("\") al simbolo, che tecnicamente prende il nome di carattere di escape.

Tempo di esempi dunque! Iniziamo subito: se volessi l'espressione di poco sopra, che inizi per "a", seguita da 7 cifre e da una "r", ecco il codice corrispondente: /a\d{7}r/

Se invece voglio cercare tutte le sottostringhe che contengano un qualsiasi carattere alfabetico, seguito da un numero opzionale di cifre (quindi zero o più occorrenze), seguite da uno spazio e una qualsiasi lettera tra "f", "t" o "q":
/\D\d*\s[ftq]/

Come avete capito si tratta soltanto di imparare la sintassi giusta e poi il come creare una espressione regolare viene da sé

A questo punto passiamo alle applicazioni pratiche, ovvero alla ricerca e alla sostituzione di espressioni regolari all'interno delle stringhe.

La classe String ci offre due metodi interessanti search() e replace().
Il primo permette di cercare una espressione regolare all'interno di una stringa e restituisce in caso positivo la posizione del primo carattere della sottostringa all'interno della stringa esaminata, in caso negativo restituisce -1.
Il secondo metodo ha come primo attributo una espressione regolare che rappresenta la sottostringa da sostituire, e come secondo argomento una stringa che rimpiazzerà quella indicata dalla espressione regolare.

Un'ultima nota prima degli esempi pratici riguarda due attributi delle espressioni regolari che possono essere usati con questi due metodi. Tali attributi sono g e i che indicano rispettivamente una ricerca globale, su tutta la stringa (se non specificato la ricerca o la sostituzione si fermano alla prima occorrenza del termine) e il secondo indica che la ricerca della espressione regolare deve essere case-insensitive, ovvero non distinguendo tra maiuscole e minuscole. Tali attributi vanno messi alla fine di una espressione regolare, all'interno di uno dei metodi visti sopra (ad esempio replace(/ciao/gi, "salve"); sostituisce tutte le occorrenze della parola 'ciao', senza distinguere tra maiuscole e minuscole, con la paorla 'salve').

Eccoci dunque agli esempi pratici. Farò degli esempi interattivi per farvi capire meglio come funzionano questi metodi:

Ecco il codice per creare un input box dove viene richiesto di immettere il proprio nome. Successivamente si controlla se nel testo immesso appare il nome Mario Rossi. Se questo avviene il messaggio sarà "Ciao Mario Rossi, lieto di rivederti!", altrimenti faremo scrivere un messaggio tipo: "Ciao _nome_, lieto di conoscerti!".

Cliccate sul bottone qui sotto per provare cosa succede, prima di vedere il codice. Prima provate a mettere un nome qualsiasi diverso da "Mario Rossi" e successivamente mettete come nome "Mario Rossi".



Ecco il codice necessario per creare l'esempio appena visto:

<input type="button" value="Inizia test" onClick="test()">
<script language="javascript">
var amico = /Mario Rossi/;
var nome;

function test()
{
nome = prompt("Come ti chiami?","");
var corr = nome.search(amico);
if(corr!=-1)
{
alert("Ciao "+nome+", lieto di rivederti!");
}
else if(corr==-1)
{
alert("Ciao "+nome+", lieto di conoscerti!");
}
}

</script>


Se invece volessimo fare uno scherzo a qualcuno e fare una sostituzione in modo che ad ogni gruppo di due lettere, di cui la prima è un qualsiasi carattere e la seconda è una "e", venga sostituita la stringa "xy", basterebbe fare in questo modo:

<input type="button" value="Inizia il test" onclick="scherzo()">
<script language="javascript">
function scherzo()
{
var testo = prompt("Inserisci un testo qualsiasi e vedi di metterci almeno una 'e'!","");
testo = testo.replace(/\we/g,"xy");
alert(testo);
}
</script>

Prova l'effetto dello script qui sopra:



Come avete visto è tutto molto semplice ma allo stesso tempo estremamente potente per lavorare con le stringhe. Ad esempio io ho creato uno script che, mettendo uno testo qualsiasi in una textarea, restituisce il testo equivalente ma formattato in HTML, ovvero sostituendo i caratteri accentati semplici con i codici tipo "&agrave;" e alcuni simboli con i codici corrispondenti, nonché sostituisce i ritorni a capo con i tag <br>, così che basta immettere un testo normalmente e lo script pensa a fare tutto il lavoro per voi!!! Potete vedere questo script cliccando qui

<-Indietro