Recherche dans une page Web

Version imprimable

02/10/2017, 18h32
RYMOOO

Recherche dans une page Web

Bonsoir
Je suis débutante et je suis en train de faire un script qui sert à effectuer une recherche , en fait l'utilisateur saisit le mot recherché et le script va mettre un style par exemple ( le background RED) dans tous les mots trouvés dans la page .
Ce script se compose de 2 étapes : la première est chercher tous les mots de la page, cela est réglé, on peut le faire soit avec l'objet STRING ou soit REGEXP. Ce qui me pose problème est de changer le style des mots trouvés, ce qui nous conduit à ajouter un élément à la DOM.

J'attends vos réponse et merci d'avance
02/10/2017, 20h12
Beginner.

Salut,

J'avais posté ce message : #4 dans un fil, tu y trouveras notamment un lien vers un autre fil que j'avais ouvert sur le sujet...

Dans une page web comme tu le sais le texte peut être formaté (ce qui implique la présence de balises) alors si les mots que tu cherches sont entièrement à l'intérieure d'une seule balise c'est plus simple, le cas difficile c'est quand le mot trouvé n'est pas contenu à l'intérieur d'une seule balise... Certains des codes que l'on trouve ici et là ne fonctionnent pas dans ce cas...
02/10/2017, 22h27
RYMOOO

Bonsoir

Je viens de regarder le code , je peux dire qu'il répond à ma question , lui il a utilisé l'objet WINDOW , est ce que avec cet objet on peut changer la couleur de sélection . on peut sélectionner tous les mots trouvés à la fois , dans le cas ou la page contenant plusieurs ????? . je te remercie pour ta réponse
03/10/2017, 20h44
Beginner.

Salut,

Si tu veux parler de la fonction window.find() utilisée dans l'exemple alors comme je le disais je m'étais aussi demandé si on pouvait définir son propre style et si on pouvait affecter ce style à tous les mots en même temps... Eh bien il ne m'a pas semblé que ce soit possible, en tous cas ils n'en parlent pas dans mes lectures concernant cette fonction mais peut-être que quelqu'un d'autre sera mieux te renseigner...

Ceci dit je pense qu'on peut le faire sois-même : il semble que cette fonction effectue une seule recherche à la fois donc pour chercher tous les mots il suffirait de la relancer à chaque fois jusqu'à la fin de la page web... Après pour le style on pourrait entourer chaque mot trouvé par des balises span avec une class pour le css...

Sinon il y a d'autres manières de faire, une d'entre elles avait été expliquée par NoSmoking dans le fil que j’avais ouvert (Principe de la fonction "rechercher") au message #12 et au message suivant j'avais posté un lien vers exemple d'application concret.

A+...

PS : Est-ce que tu veux un truc tout fait ou bien tu veux aussi comprendre et apprendre à le faire ? Car il y en a des codes tout fait...
03/10/2017, 22h17
danielhagnoul

Citation:

Envoyé par Beginner.

[...] Car il y en a des codes tout fait...

https://github.com/padolsey/findAndReplaceDOMText
04/10/2017, 00h23
Beginner.

Re-Salut,

@danielhagnoul : Oui merci, je pensais notamment à ce lien, j'avais vu que tu l'avais donné dans d'autres fils et d'ailleurs tu l'as utilisé dans ton article ici : Comment puis-je surligner des mots identiques ?

Et je rappelle aussi ce que j'avais écrit ci-dessus : Sinon il y a d'autres manières de faire, une d'entre elles avait été expliquée par NoSmoking dans le fil que j’avais ouvert (Principe de la fonction "rechercher") au message #12 et au message suivant j'avais posté un lien vers un exemple d'application concret de cette explication...

Citation:

Envoyé par Beginner.

Ceci dit je pense qu'on peut le faire sois-même : il semble que cette fonction effectue une seule recherche à la fois donc pour chercher tous les mots il suffirait de la relancer à chaque fois jusqu'à la fin de la page web... Après pour le style on pourrait entourer chaque mot trouvé par des balises span avec une class pour le css...

J'ai fait un test de cela (c'est-à-dire en utilisant la fonction window.find()) ici : http://jsbin.com/cenahusome/edit?js,console,output ...
Le code n'est pas trop long mais je pense qu'il doit être limité quand même... Il n'y a pas toutes les options...
04/10/2017, 12h29
RYMOOO

Bonjour (llloooooolll ce que je cherche )

Je viens de regarder le lien c'est vraiment intéressant , tu sais que j'avais la même idée . après je me disais c'est long et compliqué , finalement c'est la solution proposée, j'étais sur le bon chemin :
voici les étapes à faire
-chercher les éléments text dans l'arbre DOM (généralement on a 2 types éléments ; TEXT ,HTML)
-si Les éléments texts disposent le mot recherché on fait SPILT ,cela veut dire couper le text chaque fois on trouve le mot recherché
-Créer un élément HTML SPAN , associé ce dernier à un style qui déjà été défini

Ce soir je me lance dans l'implémentation ,Quant au script qui sert à annuler cette recherche , il me semble qu'il est facile à faire . il suffit de supprimer les SPAN et concaténer les éléments texts.

Je te remercie , je te tiens au courant de mon travail
04/10/2017, 13h37
-Rpass-

Tu peux rajouter un Span en JS puis lui appliquer le style css background-color à red. En jquery tu as html() et append(), en JS pur ça doit être creatHTMLElement dans ce style la.

Cdt
04/10/2017, 16h19
Beginner.

Citation:

Envoyé par RYMOOO

Je te remercie , je te tiens au courant de mon travail

Bon courage !

Citation:

Envoyé par -Rpass-

Tu peux rajouter un Span en JS puis lui appliquer le style css background-color à red. En jquery tu as html() et append(), en JS pur ça doit être creatHTMLElement dans ce style la.

Je commence en effet par la fonction document.createElement("span") dans le code que j'avais posté (http://jsbin.com/cenahusome/edit?js,console,output) mais je pense que le plus difficile (c'est relatif bien sûr) c'est d'insérer cette balise <span> (avec à l'intérieure le mot trouvé) dans le document (la page web) sachant que le mot trouvé pourrait être à cheval sur plusieurs balises* de formatage (c'est-à-dire qu'il ne se trouve pas à l'intérieur d'une seule balise).

* dans ce cas on ne peut pas utiliser la fonction surroundContents...

Salut
j'ai commencé à coder cet après-midi , voici le code , il me reste les tests , ce seront pour demain , le code se compose de 2 fonctions et une fonctions mère qui les regroupes :

Code:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 //<!--Cette fonction sert à créer un élémentHTML ou textuel  --> 
  function CreerElet(IdPere,typeElet,MotRechercher,Text)
 { 
   if (typeElet == 1 )
   {   //<!--C'est un élément HTML c-à-d SPAN --> 
		var Eletspan   = document.createElement('span');
		document.getElementById(IdPere).appendChild(Eletspan) ;
	  //<!--ajouter l'élément SPAN au DOM --> 
		span.innerHTML = MotRechercher ;
		Eletspan.style.backgroundColor='green';
	}	
  else    //<!--Sinon on va ajouter élément textuel --> 
	{ 	
		var EltText=document.createTextNode(text) ;
		document.getElementById(IdPere).appendChild(EltText) ;
        EltText.innerHTML=Text ;		
	}  
 
 
 }
 
//****************************************
//<!-- Cette fonction sert à couper le text si le mot cherche est trouvé  -->
 
 function CouperChaine(Paragraphe ,motrecherche)
 {   
   return result =Paragraphe.split(/motrecherche/);     
 }
//*******************************
 //<!-- Fonction  sert à repérer tous les mots trouvés -->
 function Recherche(eltHTML ,MotRechercher) {
 
 var elt=document.eltHTML ; 
 //<!--eltHTML est HTML  -->
 var eltsChild=elt.childNodes ;
 //<!--Parcourir les noeuds de l'arbre DOM -->
 for (var i=0;i<eltsChild.length;i++)
   {
     alert(eltsChild[i]) ;
 
    if (eltsChild[i].nodeType != Node.ELEMENT_NODE and eltsChild[i].innerHTML != null ) {  
    	//<!--C'est un élément textuel -->
		//<!--Rest à tester si <> null????????-->
		  var TabText=CouperChaine(eltsChild[i].data ,MotRechercher)
	     	//<!--La fonction return un tableau contenant les texts -->  
			<!--dans lesquels figurent le mot recherche   -->  
			  if (TabText.length>0) 
			  {  IdPere=elt.getAttribut('id');
			    eltsChild[i].Data=TabText[0];	
			   //<!--On peut supprimer l'ele ou affecter le contenu de TabText[0]  -->  
				 for (var i=0 ;i< TabText.length;i++)
				 {
				   if  ( i !=TabText.length)
				     {
				       CreerElet(IdPere,1,MotRechercher,'') <!--elet SPAN -->  
					 } 
				   CreerElet(IdPere,2,MotRechercher,TabText[i]) <!--elet TEXT -->   
				 }				
			  } 			 
	    Recherche(eltsChild[i])  ;
	} 
  } 
 }

demain, je ferai les tests , je te dis bonne soirée.