Impariamo a programmare con JavaScript

icona ricerca

BLOG

FORMAZIONE freccia giu

LAVORO freccia giu

PROFILO freccia giu

- AULE GRUPPI
- Le Tue Aule
- I Tuoi Gruppi
- Le Tue Selezioni
- Home
- Login
- Registrati
- Crea azienda
- Assistenza

Lista Blog

Chat

www.skillfactory.it

segreteria@skillfactory.it

08118181361

3270870141

Richiedi informazioni

Skill Factory

Lista post > Impariamo a programmare con JavaScript - Lezione 9

Impariamo a programmare con JavaScript - Lezione 9

Gino Visciano | Skill Factory - 09/07/2017 19:18:13 | in Tutorials

Benvenuti alla nona lezione, in questa lezione impariamo ad usare Le espressioni regolari RegExp. Le espressioni regolari si usano per eseguire operazioni di ricerca, validazione oppure di ricerca e sostituzione sul testo.

In JavaScript esistono due modi per 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 (/):

var espressione = /.../;

il secondo attraverso l'oggetto RegExp:

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

Per applicare il pattern di un'espressione regolare ad una stringa si usa il metodo test():

espressione.test(stringa);

Se l'espressione è verificata si ottiene True altrimenti False.

Per creare un'espressione regolare su usano:

Modificatori
Ancore
Qualificatori
Classi
Caratteri speciali

Modificatori
i - la ricerca diventa case-insensitive, cioè maiuscole e minuscole vengono considerate uguali;
m - la ricerca verrà considerate “per riga”, cioè le ancore tipo “^” e “$” verranno applicate per ogni riga di testo;
g - cerca tutte le ricorrenze e non solo la prima.

Esempio 1
In questo esempio il pattern /skill factory/ non verrà trovato perchè nel messaggio "Scuola Skill Factory" le iniziali delle parole sono maiuscole.

<html>
<head>
</head>
<body>
<script type="text/javascript">
var messaggio="Scuola Skill Factory";
// Ricerca di tipo case-sensitive
var pattern=/skill factory/;
if (pattern.test(messaggio)) {
document.write("Pattern trovato!");
} else {
document.write("Pattern non trovato!");
}
</script>
</body>
</html>

Esempio 2
In questo esempio il pattern /skill factory/i verrà trovato perchè il modificatore i rende la ricerca case-insensitive.

<html>
<head>
</head>
<body>
<script type="text/javascript">
var messaggio="Scuola Skill Factory";
// Ricerca di tipo case-insensitive
var pattern=/skill factory/i;
if (pattern.test(messaggio)) {
document.write("Pattern trovato!");
} else {
document.write("Pattern non trovato!");
}
</script>
</body>
</html>

Esempio 3
In questo esempio il metodo replace permette di ricercare il pattern /scuola/ in modalità case-insensitive e sostituisce la prima ricorrenza trovata.

<html>
<head>
</head>
<body>
<script type="text/javascript">
var messaggio="Scuola Skill Factory Scuola";
var pattern=/scuola/i;
//Contenuto messaggio prima della sostituzione
document.write(messaggio+"<br/>");
//Contenuto messaggio dopo la sostituzione
messaggio=messaggio.replace(pattern,"Azienda");
document.write(messaggio);
</script>
</body>
</html>

Esempio 4
In questo esempio il metodo replace permette di ricercare il pattern /scuola/ in modalità case-insensitive e sostituisce tutte le ricorrenza trovate.

<html>
<head>
</head>
<body>
<script type="text/javascript">
var messaggio="Scuola Skill Factory Scuola";
var pattern=/scuola/ig;
//Contenuto messaggio prima della sostituzione
document.write(messaggio+"<br/>");
//Contenuto messaggio dopo la sostituzione
messaggio=messaggio.replace(pattern,"Azienda");
document.write(messaggio);
</script>
</body>
</html>

Ancore
^ - identifica l'inizio della stringa;
$ - identifica la fine della stringa.

Esempio 5
In questo esempio il metodo replace permette di ricercare il pattern /scuola/ in modalità case-insensitive e sostituisce l'ultima ricorrenza trovata.

<html>
<head>
</head>
<body>
<script type="text/javascript">
var messaggio="Scuola Skill Factory Scuola";
var pattern=/scuola$/i;
//Contenuto messaggio prima della sostituzione
document.write(messaggio+"<br/>");
//Contenuto messaggio dopo la sostituzione
messaggio=messaggio.replace(pattern,"Azienda");
document.write(messaggio);
</script>
</body>
</html>

Qualificatori
* - indica 0 o più ricorrenze;
+ - indica 1 o più ricorrenze;
? - indica 1 o 0 ricorrenze;
{n} - ricerca esattamente n occorrenze;
{n,} - ricerca minimo n occorrenze;
{n,m} - ricerca esattamente minimo n occorrenze, massimo m.

Classi
Le classi determinano un elenco di caratteri, vengono racchiuse tra parentesi quadre e possono essere seguite dai quantificatori.

[0-9] una cifra da 0 a 9;
[0-9]+ almeno una cifra da 0 a 9;
[^0-9] qualunque carattere a parte i numeri;
[a-z] una lettera alfabetica minuscola;
[A-Z] una lettera alfabetica maiuscola;
[a-zA-Z] una lettera alfabetica minuscola o maiuscola;
[^a-zA-Z] qualunque carattere a parte le lettera alfabetica minuscole e maiuscole;
[0-9a-zA-Z] una lettera oppure un numero;
[0-9,]+ contiene almeno una cifra o una virgola.

Esempio 6
Un codice RGB è un numero esadecimale composto da sei cifre. Le cifre del sistema esadecimale sono 16: 0123456789ABCDEF.
L'esempio seguente permette di verificare se il codice esadecimale che corrisponde ad un colore RGB è corretto.

<html>
<head>
</head>
<body>
<script type="text/javascript">
//Codice RGB corretto
var numero_esadecimale="FFAA01";
var pattern_esadecimale=/[0-9A-F]{6}/i;
if (pattern_esadecimale.test(numero_esadecimale)) {
document.write(numero_esadecimale+": ");
document.write("Formato numero esadecimale corretto!<br/>");
} else {
document.write(numero_esadecimale+": ");
document.write("Formato numero esadecimale non corretto!<br/>");
}
//Codice RGB non corretto
numero_esadecimale="ROMA01";
var pattern_esadecimale=/[0-9A-F]{6}/i;
if (pattern_esadecimale.test(numero_esadecimale)) {
document.write(numero_esadecimale+": ");
document.write("Formato numero esadecimale corretto!<br/>");
} else {
document.write(numero_esadecimale+": ");
document.write("Formato numero esadecimale non corretto!<br/>");
}
</script>
</body>
</html>

Caratteri speciali
. - corrisponde ad un carattere qualsiasi (ex. [.]{5} parola di cinque caratteri);
\. - indica il carattere punto;
\( - indica il carattere parentesi;
| - indica oppure (ex. [r|t] parola che contiene un solo carattere che può essere r oppure t);
\d - ricerca cifre numeriche, corrisponde a [0-9]+;
\D - non contiene cifre numeriche, corrisponde a [^0-9]+;
\t - ricerca tabulazione (TAB);
\n - ricerca fine riga (LF);
\r - ricerca ritorno a capo (CR);
\s - ricerca lo spazio;
\S - non contiene lo spazio;
\uxxx - ricerca il carattere indicato con il codice unicode xxx;
\w - ricerca qualsiasi carattere alfanumerico inclusi "_" e lo spazio, corrisponde a [0-9a-zA-Z_ ];
\W - ricerca qualsiasi carattere non alfanumerico, corrisponde a [^0-9a-zA-Z_ ].

Esempi di Espressioni Regolari:

* equivale a {0,}
+ equivale a {1,}
? equivale a {1,0}

[uno]{3} equivale ad una delle seguenti parole:
uno, uon, nuo, nou, onu, oun.

Euro
\d*\.\d{2}

Codice Fiscale
[A-Z]{6}\d{2}[A-Z]\d{2}[A-Z]\d{3}[A-Z]

Partita IVA
\d{11}

Indirizzo email
[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}

Linea vuota
^$

Data in formato gg/mm/aaaa
(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[-/.](19|20)\d\d

Nome utente formato da soli caratteri alfanumerici più _ e – di lungezza min 3 e max 15
^[a-z0-9_-]{3,15}$

Password che deve contenere un numero, un carattere minuscolo, uno maiuscolo e un carattere speciale tra @#$% e deve avere lunghezza min 8 e max 20
((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{8,20})

Tag HTML
<([A-Z][A-Z0-9]*)\b[^>]*>(.*?)

Estensione di un file immagine
([^\s]+(\.(?i)(jpg|png|gif|bmp))$)

Indirizzo IP
^([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\.([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\.([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\.([01]?\\d\\d?|2[0-4]\\d|25[0-5])$

Arrivederci alla prossima lezione!!!

<< Lezione precedente Lezione successiva >>

T U T O R I A L S S U G G E R I T I

tutorials javascript regexp regex

4285 Visualizzazioni

TOP