INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Le espressioni regolari in Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Introduzione alle regular expressions

Le regular expressions (espressioni regolari) sono un potente strumento di controllo per la verifica delle stringhe, dei caratteri che contengono o del loro formato.

Si tratta di uno pseudo-linguaggio di programmazione che usa simboli e sequenze di caratteri di controllo piuttosto complesse, abbastanza familiari, tuttavia, a coloro che conoscono il Perl.

Un classico esempio di controllo di espressione regolare è rappresentato dall'indirizzo email, composto da una username, dalla chiocciole (@), da dominio del sito/provider e dall'estensione del dominio

username@dominio.ext

Altro esempio di espressione regolare è il codice fiscale italiano, composto da 16 caratteri alfanumerici, in una sequenza del tipo

AAABBB12C21D345E

Ci sono altri esempi in cui è necessario, o comunque più comodo, ricorrere alle espressioni regolari per controllare una stringa.

Naturalmente il motore interprete (parser) delle espressioni regolari è differente, sia pur in minima parte, da linguaggio a linguaggio. I nostri esempi di espressioni regolari saranno redatti in Javascript lato client.

In questo Articolo impareremo la modalità di dichiarazione e di controllo, e la sintassi di questo potente mezzo a disposizione dello sviluppatore.

Dichiarazione di un'espressione regolare

Esistono due sistemi con cui è possibile dichiarare il pattern (sequenza di caratteri di controllo) di un'espressione regolare; il primo è attraverso una semplice stringa contenuta in una coppia di caratteri slash (/) ed il secondo attraverso l'oggetto RegExp.

Vediamo un esempio di espressione regolare richiamata attraverso un pattern contenuto in una costante (variabile statica)

var espressione = /.../;

Il pattern è rappresentato dai tre puntini (...) e non si tratta di una vera espressione regolare, ma di un semplice esempio sintattico atto a comprendere la modalità di dichiarazione.

L'oggetto RegExp, invece, viene istanziato in una variabile di tipo new come nell'esempio che segue:

var espressione = new RegExp("...");

In sostanza non ci sono differenze tra questi due sistemi dichiarativi. Negli esempi che seguiranno, per semplicità, utilizzeremo il primo dei due sistemi descritti.

Impostazione di controllo dell'espressione regolare

Per impostare il controllo di un'espressione regolare si utilizza il metodo test() dell'oggetto RegExp, attraverso il seguente esempio sintattico

if (espressione.test(stringa))
{
    // "stringa" rispetta le specifiche
}
else
{
    // "stringa" NON rispetta le specifiche
}

Naturalmente possiamo impostare il controllo per eseguire un'azione solo se la stringa non rispetta le specifiche dell'espressione regolare, come nella validazione dei campi di un modulo HTML, sia utilizzando l'operatore di negazione (!)

if (!espressione.test(stringa))

che impostando la condizione su false

if (espressione.test(stringa) == false)

Sintassi delle espressioni regolari

Veniamo adesso alla parte più difficile dell'argomento espressioni regolari, ovvero la definizione dei metacatarreri (sequenze di caratteri di controllo), dei costrutti sintattici e semantici.

Una volta entrati nei vari meccanismi che regolano la definizione di un'espressione regolare, più o meno semplice o generica, risulterà molto semplice risolvere problemi apparentemente diffici, risolvibili altrimenti con lunghe routine di controllo attraverso il linguaggio di programmazione o di scripting utilizzato.

Iniziamo con un esempio che verifica che una stringa sia composta esclusivamente da caratteri alfanumerici

var espressione = /^[a-z0-9]/;
var stringa = "lukeonweb";
if (!espressione.test(stringa))
{
    document.write("La stringa non è valida!");
}

In questo caso non otterremo alcun output, dato che la stringa da verificare è completamente alfabetica. Esaminiamo adesso i metacaratteri utilizzati all'interno dell'espressione regolare

/ e /   racchiudono una stringa
^       indica il primo carattere della stringa
[ e ]   indicano un blocco di tipo stringa
-       separa gli elementi di un set di caratteri

Proviamo a tradurre l'esempio appena mostrato con l'utilizzo dell'oggetto RegExp

var espressione = new RegExp("^[a-z0-9]");
var stringa = "lukeonweb";
if (!espressione.test(stringa))
{
    document.write("La stringa non è valida!");
}

Ipotiziamo che uno dei caratteri da controllare in un'espressione regolare sia, accidentalmente, un metacarattere delle espressioni regolari. Utilizzeremo il carattere back-slash () per isolarlo

/^[^]/

Se il carattere da controllare è proprio un back-slash, utilizzeremo un doppio back-slash

/^[\]/

Il primo back-slash dungerà da literal escape ed il secondo verrà interpretato come carattere e non come metacarattere.

Passiamo a qualcosa di più complesso. Ipotizziamo di voler verificare che in una stringa sia presente il carattere punto che separi due blocchi alfanumerici. Ecco l'espressione regolare da utilizzare

var espressione = /^([a-z])+.([a-z])/;
var stringa = "lukeonweb.net";
if (!espressione.test(stringa))
{
    document.write("La stringa non è valida!");
}

Anche in questo caso non otterremo il messaggio di errore, dato che la stringa rispetta le specifiche indicate nell'espressione regolare.

Analizziamo i nuovi metacaratteri che incontriamo

( e )   racchiudono un blocco da concatenare ad un altro blocco
+       concatena due blocchi di stringhe
       rende parte della stringa un metacarattere, oppure
        contiene un carattere stringa da analizzare

Posso assicurarvi che i meccanismi delle espressioni regolari si esauriscono qui, resta solo da sapere che esistono ancora moltissimi metacaratteri e combinazioni di metacaratteri. E' assurdo pensare di impararli a memoria, ma è importante sapere che esistono e, all'occorrenza, reperirli.

I metacaratteri delle espressioni regolari

Come anticipato nel paragrafo precedente, esistono una serie ben nutrita di metacaratteri per la verifica delle più disparate stringhe attraverso l'ausilio delle espressioni regolari.

Iniziamo con un altro esempio. Sempre nel paragrafo precedente abbiamo incontrato il carattere ^ che permette di verificare l'inizio di una stringa. Il carattere $, invece, permette di verificare la fine.

Prendiamo l'espressione regolare

/^a/

che vuole che si verifichi che una stringa inizi con la letter a. La stringa

abc

restituisce true, mentre la stringa

cba

restituisce false. I risultati della verifica in base a queste due diverse stringhe, sia pur composte dagli stessi caratteri ma in sequenza differente, produrrà il risultato perfettamente opposto se l'espressione regolare è

/a$/

Queste due tecniche di verifica sono dette Match.

Vediamo adesso uno schema riepilogativo dei metacaratteri delle espressioni regolari

^
Verifica l'inizio di una stringa.

$
Verifica la fine di una stringa.

[.]
Coincide con qualsiasi carattere tra parentesi.

[^.]
Coincide con qualsiasi carattere fuori parentesi.

w
Verifica che una stringa sia alfanumerica, minuscola.

W
Verifica che una stringa sia alfanumerica, maiuscola.

d
Indica qualsiasi cifra numerica.

D
Indica qualsiasi carattere che non sia una cifra numerica.

s
Indica uno spazio vuoto.

S
Indica qualsiasi carattere che non sia uno spazio vuoto.

Ripetizioni di caratteri

Come il titolo di questo paragrafo lascia ad intendere, i metacaratteri che andremo ad elencare verificano che ci siano o meno, e come, ripetizioni di uno stesso carattere all'interno di una stringa.

Vediamo l'elenco

{x}
Indica il carattere precedente per x volte.

(x,}
Indica il carattere precedente per x o più volte.

{x,y}
Il carattere precedente si ripetere x volte ma non più di y.

?
Indica il carattere precedente per 0 o 1 occorrenza.

*
Equivale a {0,}.

+
Equivale a {1,}.

Raggruppamenti

Vediamo come raggruppare più elementi all'interno di un'espressione regolare. Di seguito presento l'elenco completo dei metacaratteri che assolvono a questa funzione

()
Raggruppamento di più oggetti in una singola unità.

|
Alterna espressioni sulla sinistra o sulla destra.

I literal escape

Concludiamo questa lunga discussione sulle espressioni regolari in Javascript parlando dei literal, ovvero un'accoppiata back-slash ed una lettera che fungono da escape di controllo.

Vediamo un elenco



Imposta una nuova linea.

f
Imposta un Form Feed.



Imposta un ritorno a capo.

	
Imposta una tabulazione orizzontale.

v
Imposta una tabulazione verticale.

I seguenti literal escape vengono usati per rappresentare il simbolo che segue il back-slash. Ad esempio

rappresenta il carattere punto interrogativo (?) e cosi via.

Di seguito l'elenco

?

*

+

.

|

{

}



\

[

]

(

)

Conclusioni

Siamo decisamente arrivati alla conclusione del nostro cammino. Quanto imparato in queste pagine vi permetterà di imparare a costruire qualsiasi espressione regolare per il controllo di qualsiasi tipo di stringa, ed in più riuscirete a comprendere, col minimo sforzo, le espressioni regolari già pronte che troverete sul Web.

Ricordo, inoltre, che quanto spiegato in queste pagine, si limita in buona parte all'interpretazione del parser di Javascript. Il parser di VBScript, ad esempio, possiede alcuni metodi interpretativi differenti. Un'espressione regolare Javascript verrà interpretata correttamente in VBScript più o meno al 65% o al 70%, a seconda dei casi.

Lato buono della cosa, le espressioni regolari Javascript, oggetto di questa lunga discussione, sono utilizzabili al 100% con JScript lato server, nell'implementazione di pagine ASP con questo linguaggio.

IN EVIDENZA

Una slidegallery con jQuery Pagamenti online con PayPal e PHP Riavviare IIS Guadagna col tuo sito grazie a TradeD... Guida XHTML Errore 80004005: Cannot update. Datab... Generare password casuali in Javascri... Riscrivere le URL con Asp Effetto ombra su testo con Photoshop Referenze dei Tag Html Introduzione ad Ajax ed Asp con Jscri... HTTP 500 internal server error Stringhe di connessione via ODBC e Ol... Breve guida a jQuery Referenze dei fogli di stile Css Le espressioni regolari in Javascript

HOT LINKS

Corsi online Guadagna col sito Hosting 20 euro Mr.Webmaster PHP&Linux ExtroWebSite gDesign NetFree TutorialWeb Dablones AiutoPC AspCode MorpheusWeb WebIsland WebmasterRisorse PCSelf