Discussion :

[julienM38]

Bonjour à tous,

J'ouvre ce nouveau topic pour parler des nouvelles techniques de recherche de mots clefs.(str.search() remplaçant le bon vieux window.find()).
j'aimerais vos conseils pour chercher un string, trouver son élément (ou nœud )et renvoyer sa position pour l'afficher via scrollintoview().
Étant débutant j'aimerais connaitre les bonnes pratiques sur ces méthodes et les bonnes fonctions qui rempliront ce schéma algorithmique:

- chercher mot clef
tant qu'il y a des élément trouvés:
-trouver sa position
-trouver son élément
-afficher son élément

Pour résumer, j'aimerais faire un window.find() à la mano pour rechercher dans un InnerHTML bien défini dans ma page:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var book=document.getElementById("book").innerHTML;

Le but de tout ceci est de proposé une méthode de recherche efficace à l'internaute
J'avais aussi penser à créer une liste de liens vers les occurrences trouvés. Qu'en pensez vous?
J'aimerais vos avis et/ou une liste de méthode au lieu d'un bout de code qui serait moins pédagogique pour moi.

Merci de votre aide

[julienM38]

sans réponse aujourd'hui j'ai donc coder. J'ai indexé mes Div représentant mes chapitres. Qu'en pensez vous?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//recherche de mot clef
function searchstring(){
 
var keyword=document.getElementById("search-field").value;
//scan de toute les div du book = nombre de cahpitre et sous chapitre  
for (var iter=1;iter<=20;iter++){
    for (var jter=1;jter<=14;jter++){
      iter=iter.toString();
      jter=jter.toString();
      var div=iter+'I'+jter;
     //si la div n'existe pas=sortie 
    if(document.getElementById(div)!=null) {
      var content=document.getElementById(div).innerText;
      var fund=content.search(keyword);
      //si quelque chose trouvé
      if (fund>0){
        //ouverture du chapitre parent
        if (iter.length==1){var parent = div.substring(0,1);}
       else{var parent = div.substring(0,2);}
        dispdiv(parent);
        //ouverture du sous chapitre
       //document.getElementById(div).show();
       alert(parent+'      '+ div +'     '+fund+'     '+iter+' '+jter);  
        //go to position of the display
        //      var position=document.getElementById(div);
        //      position.scrollIntoView();
 
                     }
      }else {break;}
 
      }
      }
  //fin du scan et RAZ
  alert("recherche terminé");
 
}

[Watilin]

Je ne comprends pas bien l’intérêt, ou alors je n’ai pas compris ce que tu veux faire. Pour moi tu cherches à réinventer la roue ; les navigateurs proposent déjà une fonctionnalité de recherche avec Ctrl+F et la touche F3. Firefox a même une fonction de recherche rapide qui ne cible que les liens quand on appuie sur ' (touche 4).

Proposer un champ de recherche est utile quand les données ne se trouvent pas sur la page. Ton rôle alors, en tant que développeur, est d’écrire le code qui va interroger le serveur avec le mot-clé saisi.

Bon, j’ai quand même quelques conseils à propos de ton code :
string.search est un vieux machin, son utilisation est déconseillée aujourd’hui. Il faut savoir qu’il utilise sous le capot le constructeur RegExp, ce qui permet de faire des recherches par motifs. Par exemple, le motif b.lle trouvera entre autres « belle » et « bulle », et ma(land)?rin trouvera « marin » et « malandrin ».

Si tu veux utiliser une méthode plus moderne qui repose sur les regexps, construis explicitement une regexp, et utilise sa méthode .test() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var reg = new RegExp(keyword);
...
var fund = reg.test(content); // renvoie true ou false
if (fund) {
  ...

Tu peux éventuellement rajouter le flag "i" pour faire des recherches insensibles à la casse, c’est-à-dire qui trouvent indifféremment les majuscules et les minuscules.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var reg = new RegExp(keyword, "i");

Si tu veux simplement faire une recherche de sous-chaînes, ce qui a l’avantage de demander moins de temps de processeur, tu peux utiliser .indexOf() ou la plus récente méthode .includes().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var fund = content.indexOf(keyword); // peut renvoyer -1, comme .search()
if (fund > 0) {
  ...

Ou :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var fund = content.includes(keyword); // renvoie true ou false
if (fund) {
  ...

Je ne garantis pas que includes est supportée partout à l’heure actuelle.

Cette partie peut être reformulée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
if (iter.length == 1) {
  var parent = div.substring(0, 1);
} 
else {
  var parent = div.substring(0, 2);
}

Tu fais substring(0, 1) quand iter a une longueur de 1, et substring(0, 2) quand iter a une longueur de 2. Tu peux donc utiliser directement iter.length comme paramètre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var parent = div.substring(0, iter.length);

Mais vu le nom de la variable parent, peut-être que tu serais intéressé par la propriété parentElement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var parentElement = document.getElementById(div).parentElement;
var parent = parentElement.id;

Je reste cohérent avec ta convention de n’utiliser que les id des éléments, même si je pense que ça serait plus pratique d’avoir des références sur les éléments eux-mêmes, par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var divElement = document.getElementById(div);

innerText ne tient pas compte du texte des éléments qui sont invisibles ! Voir textContent § Différences avec innerText. Ça marchera sans doute mieux avec textContent.

[julienM38]

Bonjour et merci pour ta réponse. elle m'aide vraiment.
J'ai oublié de préciser le but de tout ca: c'est un livre interactif où il vas y avoir beaucoup d'informations et je voulais guider au mieux mes utilisateurs.

Au vu de ton explication je pense utiliser regexp. J'avais entendu parler de ces fonctions mais voulais éviter d'y mettre le nez dedans.(je suis automaticien et développeur en autoformation)

voila ou j'en suis et tu as raison je cherchai a réinventer la roue. Peux tu STP me conseiller sur la fin de la function:'l'affichage'. scrollintoview? ou simplement focus()? Je galère également pour ouvrir mon accordion qui contient le mot trouvé.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//recherche de mot clef
function searchstring(){
 
var keyword=document.getElementById("search-field").value;
//scan de toute les div du book = nombre de cahpitre et sous chapitre  
for (var iter=1;iter<=20;iter++){
    for (var jter=1;jter<=14;jter++){
      iter=iter.toString();
      jter=jter.toString();
      var div=iter+'I'+jter;
     //si la div n'existe pas=sortie 
    if(document.getElementById(div)!=null) {
      var content=document.getElementById(div).textContent;
      var reg = new RegExp(keyword, "i");
      var fund = reg.test(content);
      //si quelque chose trouvé
      if (fund==true){
        //ouverture du chapitre parent
        dispdiv(iter);
        //ouverture du sous chapitre
       $('div#accordion-'+iter+'item-'+jter).collapse('show');
        //location.href=("div#accordion-1"+iter+" .item-"+jter);
       alert( div +'     '+fund+'     '+iter+' '+jter);  
        //go to position of the display
        //      var position=document.getElementById(div);
        //      position.scrollIntoView();
 
                     }
      }else {break;}
 
      }
      }
  //fin du scan
  alert("recherche terminé");
 
}

Merci de ton aide en tous cas