Javascript e le regular expression: illuminazioni celesti pronte all’ uso!

Se non sai che cosa sono le espressioni regolari che vengono usate in tutti i linguaggi di programmazione don’t worry! Di solito un approfondimento nel mese di Aprile può aprire spiragli inaspettati se non altro perchè l’illuminazione celeste è una prerogativa di questo mese. Andiamo subito alla pratica. Ipotizziamo che come organizzatore di un torneo di scacchi mi debba trovare nella necessità di far inserire una serie di dati sulla pagina delo mio sito per una ipotetica iscrizione al più grande torneo di tutti i tempi dopo quello di Zurigo del 1953. Questi utenti devono essere sicuri di digitare l’elo giusto della loro forza agonistica senza che io organizzatore/webmaster debba preoccuparmi dei dati immessi che potrebbero essere anche stringhe conflittuali nei confronti del sistema. Come risolverla quindi in Javascript visto che in PHP lato server abbiamo a disposizione un meccanismo di validazione per ripulire e rendere i dati inseriti immacolati? Semplicemente usando le espressioni regolari. Quindi abbiamo un campo dove è richiesto:

var elo = “1987”;

ossia dichiaro una variabile di nome elo che verrà assegnata al valore di 1987 che non è un anno temporale ma solo l’elo del potenziale frequentatore del nostro torneo. Sorge quindi un problema, questa persona mi deve validare solo numeri come tipi di dato e non zucche e patate nel campo. Un dato va controllato quindi nel suo formato visto che l’elo di solito non supera i diecimila dobbiamo supporre che all’ interno del campo l’utente possa scrivere solo quattro campi, perchè finora nessuno è mai riuscito ad ottenere 10132 punti elo se non forse sulla lontana nebulosa di Orione. Dobbiamo quindi verificare il dato inserito e ancora prima verificare che LA STRINGA NON SIA VUOTA per permettere l’immissione. Per prima cosa devo limitare la mia espressione e questo lo si fa dichiarando due / / entro le quali vanno inseriti i criteri di convalida del campo. Per far capire a javascript che è alle prese con una espressione regolare nomina una variabile arbitraria (nell’ esempio exp) e gli assegno un valore che avrà una caratteristica avendo a che fare con contenuti inseriti dentro a /…contenuti…/ e ciè che quell’ assegnazione avrà a che fare con una espressione regolare. Quindi scriviamo una espressione per verificare che la stringa punti elo è vuota:

var exp = /.+/;

qui abbiamo un punto che sta ad indicare che all’ interno del campo ci deve essere qualsiasi tipo di carattere, da un numero piuttosto che una lettera, e il + sta ad indicare che ci dovrà essere almeno un carattere dentro il campo. In questo modo è palese che il campo NON PUO’ ESSERE VUOTO. Una espressione di questo tipo non è sufficiente a convalidare il nostro punteggio elo che per convenzione ha 4 cifre, ma dichiara esplicitamente che il campo NON PUO’ ESSERE VUOTO. Abbiamo solo detto che un cxarattere qualsiasi generico dovrà essere inserito nel campo nella sua quantità minimo di numero 1 item grazie al simbolo +. Le espressioni regolari mettono a disposizione un metodo che si chiama TEST. Quindi con questo metodo verifichiamo se la stringa ottenuta dal nostro punteggio elo è aderente al nostro PATTERN inserendo come argomento la var elo e il risultato sarà un booleano che possiamo stampare a video:

risultato=exp.test(elo);
document.write(risultato);

mandando in esecuzione questo file nel browser vedremo che come per magia comparirà sullo schermo la scritta TRUE e cioè la conferma che il campo dove l’utente ha inserito il suo elo non è vuoto. Ovviamente inserendo var elo = “”; a video otterremo un FALSE. A questo punto sorge un problema. Se l’utente scrivesse nel campo qualcosa tipo var elo = “hebl”; noi a video otterremo un TRUE ma sappiamo bene che l’elo si esprime con i numero e non con le lettere. Quindi come fare per risolvere il problema e migliorare la nostra espressione? Togliamo il punto e inseriamo tra parentesi quadre una serie di numeri consentiti :

var exp = /[0123456789]+/;

è come se dicessimo all’ utente senza che lui lo sappia guarda puoi digitare una serie di valori che noi riteniamo accettabili. Volendo possiamo ancora migliorare questa espressione rielaborando il tutto in un insieme di caratteri consentiti per l’immissione usando il simbolo del trattino, quindi:

var exp = /[0-9]+/;

se ritornassi a stampare a video la sequenza:

var elo = “jshe”;
risultato=exp.test(elo);
document.write(risultato);

adesso dopo i vincoli imposti con var exp = /[0-9]+/; otterrei sul browser la bella scritta di FALSE, come è logico che sia, perchè la regular expression fa bene il suo lavoro e ci dice che vuole solo un range di numeri e non lettere. Attenzione però, se avessi scritto:

var exp = /[0-9]*/;

sostituendo il + con il * é come se dicessi alla nostra bella espressione accetta tutti i caratteri compresi tra zero e nove OPPURE accetta la loro assenza, mentre sappiamo che il + come simbolo sta ad indicare che almeno UN CARATTERE DOVRA’ ESSERE PRESENTE per la convalida. A questo punto però potrebbe sorgere un altro problema. Ipotizziamo che l’utente ubriaco si metta a digitare prima i due numeri e che poi vittima dei vapori alcolici immetta due lettere, che succederebbe in stampa? Si otterrebbe comunque un TRUE perchè di fatto l’espressione da noi sottolineata come vincolo fa capire alla macchina che i numeri ci sono, ma è palese che la comparsa delle lettere non dovrebbe comparire. Dobbiamo usare dei delimitatori per risolvere il problema: con l’accento circonflesso ^ messo a inizio stringa e il carattere $ inserito a fondo espressione è come se dicessimo alla macchina “guarda, adesso l’utente può digitare solo numeri, escludi la possibilità che impazzisca e che digiti lettere a suo piacimento”: var exp = /^[0-9]+$/; mandando in esecuzione il tutto dopo aver salvato questa volta otteniamo un TRUE se ci sono solo numeri i campi perchè abbiamo imposto alla stringa di soddisfare SOLO certi criteri. Ma se io volessi imporre che l’utente possa digitare solo quattro numeri come faccio? Posso usando le {} togliendo il + che come detto ci dice solo che almneno un carattere deve essere presente nella nostra espressione quindi:

var exp = /^[0-9]{4}$/;

Ok, in questo esempio è tutto facile ma ipotizziamo di lavorare su una variabile telefono piuttosto che elo, come faccio a far accettare all’ utente ad esempio il fatto che dopo il prefisso possa digitare un trattino? Come faccio a veicolare l’utente sul fatto che un prefisso di solito ha tre numeri di inserimento e almeno dai cinque ai nove aggiuntivi dopo il trattino? Posso dare una impostazione rigida al mio pattern? Certo che si, ipotizzando:

var telefono = “011-250644”;

scriverò:

var exp = /^[0-9]{3} – ? [6-9] {} $/;

dove [0-9]{3} – sta ad indicare la coercizione 011 e dove ? inserito dopo il simbolo – sta ad indicare che questo trattino è solo opzionale dopodichè però dovrò vincolare l’utente con l’espressione [0-9] {6} per guidarlo all’ esatta digitazione delle sei cifre successive. Ovviamente a browser sia che io imposti
var telefono = “011-250644” con il trattino o var telefono = “011250644” senza trattino otterrò un TRUE perchè in entrambi i casi la clausola -? mi assicura che l’utente possa scegliere o non scegliere di immettere nel campo il simbolo di trattino -. E se io per sbaglio di trattini ne inserisco due? Non verrebbe rispettata la condizione della regular expression e a browser vedrei un bel FALSE di conferma perchè nella nostra condizione abbiamo imposto che un trattino c’è o non c’è (ma non due!).

CONCLUSIONI: qui abbiamo usato solo il metodo test per capire i fondamenti delle espressioni regolari ma l’universalità e l’ambito in cui questi criteri di validazione operano su più linguaggi ci fanno intuire come il discorso sia solo all’ inizio e da esplorare ulteriormente. Di sicuro la Pasqua del 2020 seppure farcita di elementi apocalittici di demolizione alla Blade Runner qualcosa di buono ha portato, se non altro ha illuminato e fatto chiarezza senza ramoscello d’ultivo su un aspetto misterioso tipo la scrittura babibolonese-sumerica. Adesso quelle sibilline espressioni del tipo  = /^[0-9]{3} – ? [6-9] {} $/ saranno più facilmente decodificabili per il nuovo novizio che indossa le vesti del moderno Champollion della programmazione, che le regular expression siano con voi, amen.