regexp : greedy versus lazy !

soit le lien suivant :

let lien = `<a class="show" href="dupontcours">cours</a>`;

On remarque qu'il y a deux chevrons ">" dans l'écriture

`<a class="show" href="dupontcours">cours</a>`;

Cas greedy match

Soit l'expression régulière suivante.

On recherche une chaîne commençant par <a et qui stoppe au dernier chevron > que l'on peut trouver !

result = lien.match(/<a .*>/g);

`<a class="show" href="dupontcours">cours</a>`;

↑En Action

Cas lazy match

La présence du ? permet d'arrêt la recherche de gauche à droite à la première expression possible de fin.

result = lien.match(/<a .* ? >/g);

`<a class="show" href="dupontcours">cours</a>`;

→En Action

regexp : ?: et ?=

<p id="demo">bla bli bla bli bla </p>

The ?=n quantifier matches any string that is followed by a specific string n.
On ne prend pas en compte n dans le remplacement
<script>
function myFunction() {

    let patt1 = /bla(?= (bli|bla))/g;
    let t = document.getElementById("demo").innerHTML;

    t = t.replace(patt1,"moi");
    document.getElementById("demo").innerHTML = t;
}
myFunction()
</script>

<p id="demo">bla bli bla bli bla </p>


moi bli moi bli bla

The ?:n quantifier matches any string  that is followed by a specific string n.
On prend en compte n dans le remplacement
<script>
function myFunction() {

    let patt1 = /bla(?: (bli|bla))/g; // et pris dans le remplacement
    let t = document.getElementById("demo").innerHTML;

    t = t.replace(patt1,"moi");
    document.getElementById("demo").innerHTML = t;


}
myFunction()
</script>
<p id="demo">bla bli bla bli bla </p>
moi moi bla

RegExp

Comment vérifier dans un formulaire la saisie HH:MM:SS ?

^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$

Explication : (notez la qualité de l'explication !)

^                   # Start of string
(?:                 # Try to match...
 (?:                #  Try to match...
  ([01]?\d|2[0-3]): #   HH:
 )?                 #  (optionally).
 ([0-5]?\d):        #  MM: (required)
)?                  # (entire group optional, so either HH:MM:, MM: or nothing)
([0-5]?\d)          # SS (required)
$                   # End of string

les patterns utiles : verification d'un mot de passe.

Vérification par les patterns

Le pattern .*[\d] vérifie les motifs
• 2ab : (* = 0 ; d = 2)
• a2b : (* = 1)
• ab2 : (* = 2)
• abc : (erreur)

Le pattern .*[a-z] vérifie les motifs
• 2ab : (* = 1)
• a2b : (* = 0)
• ab2 : (* = 0)
• 222 : (erreur)

Nous pourrons écrire pattern="^(?=.*[a-z])(?=.*[\d]).*$" pour vérifier les conditions au moins un caractère et un nombre.

^                   # Start of string
(?=                 # groupe
 .*[a-z]            #  au - 1 lettre qq part
)                   #  
(?=                 # groupe
  .*[\d])           #  au - un chiffre qq part
.*                  # 
$                   # End of string

Autres pattern
• (?=.{8,}) : au - 8 Entrées
• (?=.*[A-Z]) : au - 1 Majuscule
• (?=.*[\W]) : au - 1 Caractère Spécial/li>

Découvrez une liste de patterns : https://developers.google.com/web/fundamentals/input/form/provide-real-time-validation

Test Drive HTML5 Forms demo: HTML5 Forms

*? +?

le ? après * ou + réduit au plus petit nombre.

    var str = '"foo" "bar" "dd"';
    var patt1 = /".*"/;
    var result = str.match(patt1);
//"foo" "bar" "dd"


    var str = '"foo" "bar" "dd"';
    var patt1 = /".*?"/;
    var result = str.match(patt1);
//"foo" = le plus petit match possible

    var str = '"foo" "bar" "dd"';
    var patt1 = /".*?"/g;
    var result = str.match(patt1);
//"foo" "bar" "dd"

ref

Expression régulière : la force est avec vous !

Objectif

Vous connaissez les expressions régulières : elles sont utilisées dans de très nombreux langages de programmation. Elles permettent de vérifier la saisie d'un utilisateur (email, nom, date ... ).

Voici un exemple concret d'utilisation des expressions régulières. Nous recherchons des mots réservés d'un langage pour en permettre une meilleurs lectures.

Exemple d'utilisation

Revenons sur l'expression : match = keywords.exec(text) utilisée dans l'exemple.

match = keywords.exec(text)

var keywords = /(ch)/g; // on recherche "ch" dans le text

var text = "je recherche les prochaines occurrences"; // le texte à vérifier

console.log("========== 1 ==========");

var match = keywords.exec(text);

console.log(" match = " + match); // l'expression trouvée

console.log(" match.index = " + match.index); // la position de la première

console.log(" keywords.lastIndex =" + keywords.lastIndex); 

console.log("========== 2 ==========");

match = keywords.exec(text);

console.log(" match = " + match); //  l'expression trouvée

console.log(" match.index = " + match.index); // la position de la deuxième

console.log(" keywords.lastIndex =" + keywords.lastIndex);

console.log("========== 3 ==========");

match = keywords.exec(text);

console.log(" match = " + match);

console.log(" match.index = " + match.index);

console.log(" keywords.lastIndex =" + keywords.lastIndex);

console.log("========== 4 ==========");

match = keywords.exec(text);

console.log(" match = " + match);

console.log(" match.index = " + match.index);

console.log(" keywords.lastIndex =" + keywords.lastIndex);

Fichier test : https://output.jsbin.com/beqebi/2/

Utilisation classique dans le DOM

D'après le code précédent, l'écriture d'une simple boucle permettra de rechercher et traiter toutes les occurrences.

Fichier test : https://output.jsbin.com/duveqi/1/

Retour sur un classique des regExp

Nous savons que nous pouvons utiliser classList pour connaitre si une classe fait partie d'un élément.

element.classList.contains('cssClass');

Mais avant ?