begin process at 2012 02 14 07:47:59
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > COLORISE LES MOTS D'UNE PAGE (APRES RECHERCHE)

COLORISE LES MOTS D'UNE PAGE (APRES RECHERCHE)


 Information sur la source

Note :
4 / 10 - par 2 personnes
4,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Niveau :Débutant Date de création :14/11/2004 Vu :5 192
Auteur : rttb

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (10)
Ajouter un commentaire et/ou une note

 Description

Afin d'attirer l'oeil après la recherche d'un mot, j'ai écrits ce petit bout de code qui change la couleur du texte recherche sur toute la page.
Ce n'est pas clair mais essayez, vous comprendrez.

Source

  • <html>
  • <head>
  • <title>Recherche</title>
  • <script language="JavaScript">
  • function recherche(chaine){
  • var i=0
  • var motrecherche = window.document.body.createTextRange();
  • while(motrecherche.findText(chaine)!=false) {
  • motrecherche.findText(chaine);
  • motrecherche.moveStart("character",0);
  • motrecherche.findText(chaine);
  • motrecherche.pasteHTML("<font color='#FF0033'>"+chaine+"</font>");
  • i++;
  • }
  • window.document.forms["form"].elements["nbr"].value=i+" elements trouves";
  • }
  • </script>
  • </head>
  • <body onload="javascript:recherche('ne')">
  • <FORM name="form" method="post" action="index.html">
  • <input type="text" name="nbr" size="17" maxlength="256">
  • <BR>
  • un texte qui ne sert a rien d'autre qu'illustrer
  • la fonctionnalite de ce script<BR>
  • un texte qui ne sert a rien d'autre qu'illustrer
  • la fonctionnalite de ce script<BR>
  • un texte qui ne sert a rien d'autre qu'illustrer
  • la fonctionnalite de ce script<BR>
  • un texte qui ne sert a rien d'autre qu'illustrer
  • la fonctionnalite de ce script<BR>
  • un texte qui ne sert a rien d'autre qu'illustrer
  • la fonctionnalite de ce script<BR>
  • un texte qui ne sert a rien d'autre qu'illustrer
  • la fonctionnalite de ce script<BR>
  • </body>
  • </form>
  • </html> 
<html>
  <head>
  <title>Recherche</title>
  <script language="JavaScript">
  function recherche(chaine){
  var i=0
	var motrecherche = window.document.body.createTextRange();
		while(motrecherche.findText(chaine)!=false) {
				motrecherche.findText(chaine);
				motrecherche.moveStart("character",0);
				motrecherche.findText(chaine);
				motrecherche.pasteHTML("<font color='#FF0033'>"+chaine+"</font>");
				i++;
		}
		window.document.forms["form"].elements["nbr"].value=i+" elements trouves";
	}   
</script>
  </head>	   
  <body onload="javascript:recherche('ne')">	  
<FORM name="form" method="post" action="index.html">
  <input type="text" name="nbr" size="17" maxlength="256">
 
 <BR>
  un texte qui ne sert a rien d'autre qu'illustrer
  la fonctionnalite de ce script<BR>
  un texte qui ne sert a rien d'autre qu'illustrer
  la fonctionnalite de ce script<BR>
  un texte qui ne sert a rien d'autre qu'illustrer
  la fonctionnalite de ce script<BR>
  un texte qui ne sert a rien d'autre qu'illustrer
  la fonctionnalite de ce script<BR>
  un texte qui ne sert a rien d'autre qu'illustrer
  la fonctionnalite de ce script<BR>
  un texte qui ne sert a rien d'autre qu'illustrer
  la fonctionnalite de ce script<BR>   
  
</body>
</form> 
</html>

 Conclusion

Au risque de décevoir coucou747, je ne pense pas que ce soit 'portable', désole, mais pas moyen de tester sur toutes les plateformes et tous les navigateurs.
Je suis bien sûr ouvert à toutes les modifs pour le rendre portable.

Je voulais faire la recherche sur autre chose que le body, mais cela ne semble pas possible.


 Sources du même auteur

Source avec Zip AVION PUBLICITAIRE
Source avec Zip PAGE QUI S'ADAPTE (REDIMENSIONNE) UNE IFRAME
Source avec Zip UNE JAUGE ENTIÈREMENT PARAMÉTRABLE
Source avec Zip Source avec une capture JAUGE QUI OBÉIT AU DOIGT ET À L'OEIL
Source avec Zip EFFET DE TEXTE DANS LA BARRE DE STATUS
Toutes les sources de rttb

 Sources de la même categorie

Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Source avec Zip Source avec une capture COPIER DU TEXTE par m22001111
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

Commentaires et avis

Commentaire de coucou747 le 17/11/2004 21:53:00 administrateur CS

ça m'a l'air interessant mais si t'as une solution pour le faire tourner sous Konqueror ou tout rendu gecko (Mozilla par exemple...)... je suis prenneur...

Commentaire de coucou747 le 17/11/2004 21:55:40 administrateur CS

window.document.body.createTextRange()
is not a function

c'est Mozila qui l'a dit...

Commentaire de rttb le 19/11/2004 17:59:21

createTextRange est une methode de la librairie msdn, donc je pense qu'elle ne fonctionne que sous IE, je n'ai pas trouvé d'equivalent pour les autres naviguateurs, faut utiliser IE ou un IE amelioré...

Commentaire de theXman le 22/11/2004 10:33:23

C'est du plus bel effet, merci à toi

Commentaire de rttb le 23/11/2004 19:35:18

merci, cela fait plaisir

Commentaire de theXman le 30/11/2004 10:11:55

j'essaie de remplacer la 'colorisation' du texte par une couleur de fond avec bgcolor. Mon problème est que j'utilise une table pour appliquer le bgcolor uniquement au mot recherché ce qui provoque des retours à la ligne dans mon texte final

une solution?

merci

Commentaire de rttb le 30/11/2004 17:15:01

tu crees un style dans la balise <HEAD> comme d'habitude :

<style type="text/css">
<!--
.Style1 {color: #CC3300;
              background-color: #000066;
            }
-->
</style>

puis a la place de
motrecherche.pasteHTML("<font color='#FF0033'>"+chaine+"</font>");

tu mets :
motrecherche.pasteHTML('<span class="Style1">'+chaine+'</span>');

Tous les 'delires' des CSS applicables au texte sont possibles, la fonction reecris le code html, alors tu fais ce que tu veux..


Commentaire de chimelpremier le 03/04/2005 00:44:55

Voila ma version DHTML si ça intéresse qqun:
<html>
  <head>
<style type="text/css">
.surligne
  {
  color: #C30;background-color: #ffa;
  }
</style>
<title>Recherche</title>
<script type"text/javascript">
function recherche(chaine)
  {
  var i=posChaine=posTag=finTag=n=0;doc1=doc2=''
  //doc1 : texte avant un tag
  //doc2 : texte final
  var doc = document.body.innerHTML
  el='<span class="surligne">'+chaine+'</span>'
  if(chaine=='')return
  while(doc!='' && n<999)// n pour éviter la boucle infinie
    {
    posTag=doc.indexOf('<') //position d'un début de balise HTML
    doc1=doc.substr(0,posTag) // bout de texte avant un tag
    while(doc1.indexOf(chaine)!=-1 && i<99) //tant qu'on trouve une occurence de la chaine
      {
      posChaine=doc1.indexOf(chaine); // position occurence trouvée
      doc2+=doc1.substr(0,posChaine)+el // texte avant occurence +  élément ajouté
      doc1=doc1.substr(posChaine+chaine.length,doc1.length) // doc1 restant
      i++
      }
    doc2+=doc1 // on ajoute doc1 restant après la sortie de boucle
    finTag=doc.indexOf('>')  
    doc2+=doc.substring(posTag,finTag+1) // ajoute le tag
    doc=doc.substr(finTag+1,doc.length) //reste du texte
    n++
   }
  document.body.innerHTML=doc2+doc // complète avec le reste de texte
  
  document.getElementById('nbr').value=" "+i+" éléments trouvés";
  document.getElementById('toto').value=""
}  
</script>
  </head>    

  <body onload="document.form.toto.focus()">    
<h1>Recherche de texte dans tout le document</h1>
<form name="form" method="post" action="index.html">
<p> Rechercher : <input type="text" value="" name="toto"/>
  <input onclick="recherche(document.form.toto.value)" type=button value="OK"></p>
  <input type="text" id="nbr" />
</form>

<p>
  un texte qui ne sert à rien d'autre qu'à illustrer
  la fonctionnalité de ce script<br />
  un texte qui ne sert à rien d'autre qu'à illustrer
  la fonctionnalité de ce script<br />
  un texte qui ne sert à rien d'autre qu'à illustrer
  la fonctionnalité de ce script<br />
  un texte qui ne sert à rien d'autre qu'à illustrer
  la fonctionnalité de ce script<br />
  un texte qui ne sert à rien d'autre qu'à illustrer
  la fonctionnalité de ce script<br />
  un texte qui ne sert à rien d'autre qu'à illustrer
  la fonctionnalité de ce script<br />  
</p>
<h2>Comment ça marche :</h2>
<p>
J'ai utilisé les méthodes <strong>indexOf()</strong> et <strong>substr()</strong> pour chercher les occurences de la chaine en évitant les tags HTML. Puis reconstruction de la page dans la variable <strong>doc2</strong>.
</p>
</body>
</html>

Commentaire de takali le 02/06/2005 18:47:11

Slt tous le monde, je trouve se script sympa

je voulais savoir si il été possible defectuer la même recherche avec plusieurs mots clés?

Et aussi si un tel script peu rechercher dans une <ifram>?

Voila

J'espere avoir bientôt une reponse

En tous cas

bon boulot

Emilie

Commentaire de takali le 02/06/2005 18:47:48

Slt tous le monde, je trouve se script sympa

je voulais savoir si il été possible defectuer la même recherche avec plusieurs mots clés?

Et aussi si un tel script peu rechercher dans une ifram ?

Voila

J'espere avoir bientôt une reponse

En tous cas

bon boulot

Emilie

 Ajouter un commentaire

Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Happy Bright Landscape WIth ButterfliesPhoto Monument Valley Utah known as The Mittens
Photo Sparkling lagoon in the south pacific, Moorea, French Polynesia 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,186 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)