IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Recherche dans une page Web


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Femme Profil pro
    Webmaster
    Inscrit en
    Juin 2016
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 43
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Enseignement

    Informations forums :
    Inscription : Juin 2016
    Messages : 20
    Points : 14
    Points
    14
    Par défaut 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

  2. #2
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 873
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 873
    Points : 3 717
    Points
    3 717
    Par défaut
    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...

  3. #3
    Membre à l'essai
    Femme Profil pro
    Webmaster
    Inscrit en
    Juin 2016
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 43
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Enseignement

    Informations forums :
    Inscription : Juin 2016
    Messages : 20
    Points : 14
    Points
    14
    Par défaut
    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

  4. #4
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 873
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 873
    Points : 3 717
    Points
    3 717
    Par défaut
    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...

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut
    Citation Envoyé par Beginner. Voir le message
    [...] Car il y en a des codes tout fait...
    https://github.com/padolsey/findAndReplaceDOMText

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  6. #6
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 873
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 873
    Points : 3 717
    Points
    3 717
    Par défaut
    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. Voir le message

    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...

  7. #7
    Membre à l'essai
    Femme Profil pro
    Webmaster
    Inscrit en
    Juin 2016
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 43
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Enseignement

    Informations forums :
    Inscription : Juin 2016
    Messages : 20
    Points : 14
    Points
    14
    Par défaut
    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

  8. #8
    Membre confirmé
    Homme Profil pro
    Déveleoppeur Web/Mobile
    Inscrit en
    Avril 2013
    Messages
    330
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Déveleoppeur Web/Mobile
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 330
    Points : 545
    Points
    545
    Par défaut
    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

  9. #9
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 873
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 873
    Points : 3 717
    Points
    3 717
    Par défaut
    Citation Envoyé par RYMOOO Voir le message
    Je te remercie , je te tiens au courant de mon travail
    Bon courage !

    Citation Envoyé par -Rpass- Voir le message
    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...

  10. #10
    Membre à l'essai
    Femme Profil pro
    Webmaster
    Inscrit en
    Juin 2016
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 43
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Enseignement

    Informations forums :
    Inscription : Juin 2016
    Messages : 20
    Points : 14
    Points
    14
    Par défaut
    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 : 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
    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.

Discussions similaires

  1. recherche dans une page web
    Par ftouhk dans le forum Débuter
    Réponses: 1
    Dernier message: 29/05/2014, 21h34
  2. BeautifulSoup - Recherche de données dans une page web
    Par Okidor12 dans le forum Réseau/Web
    Réponses: 8
    Dernier message: 24/07/2012, 10h36
  3. recherche d'un mot dans une page web
    Par fraisa1985 dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 23/10/2008, 15h59
  4. champ recherche dans une page Web
    Par ALIAS200 dans le forum Général Conception Web
    Réponses: 7
    Dernier message: 28/01/2008, 16h36
  5. Réponses: 1
    Dernier message: 17/08/2007, 15h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo