[JS] Recherche

Le menu est disponible grâce au bouton droit

Présentation de l'exercice

Nous voulons implémenter la recherche et la mise en valeur d'une chaîne de caractères dans une page web.

Voici le morceau de code donné dans le support de cours jQuery et son adaptation Vanilla :

var reg = new RegExp(s, "g");
var doc = document.getElementsByTagName("p"), e, c;
for (var i = 0; i < doc.length; ++i) {
  e = doc[i]; 
  c = e.innerHTML.replace(reg ,
          "<span class='hilite'>"+s+"</span>"
          );
  if (c != e.innerHTML )
      e.innerHTML = c;
}
  

$('p:contains('+s+')')
  .each(function(){
     var reg = new RegExp(s, "g");
     $(this).html( 
       $(this).html()
          .replace(reg , "<span class='hilite'>"+s+"</span>")
     ); 
  });

La version jQuery utilise un sélecteur spécifique contains qui n'est pas dans les spécifications CSS (la proposition est tombée à l'eau). On regarde donc "tous" les éléments à la main (on s'est contenté des éléments p.

Mise en œuvre

• Ajouter la classe hilite en CSS
• Tester avec un chaine simple s codée en dur puis avec une chaîne qui vient ...
• ... d'un petit formulaire (texte + bouton) à mettre en place [1]
• Gérer le cas où le champ texte est vide
• Désactiver le bouton ?
• Permettre des recherches successives [2]

Notes

Le formulaire

En ajoutant un formulaire, il est tout à fait possible que l'affichage de la chaîne recherchée soit TRÈS temporaire...

Si vous n'avez pas idée de ce qui ce passe :

Le comportement par défaut après un "submit" de formulaire est de charger la page action, la page elle-même si cela n'est pas précisé ... Qui dit page nouvelle, dit ...

Avec du code, cela peut se faire de deux manières :

onEvent="f1();return false;"
// OU
function callback(event) {
  event.preventDefault();
}

Recherches successives

La dernière question est moins simple qu'il n'y parait ! Voici quelques pistes pour la dernière question :

• removeClass() en JQuery ou .removeAttribute("class") en Vanilla - faire TRES attention dans la mise en œuvre
• Recharger la page - pas bô
• .contents().unwrap() en jQuery