Colorise les mots d'une page (apres recherche)

Soyez le premier à donner votre avis sur cette source.

Snippet vu 6 392 fois - Téléchargée 31 fois

Contenu du snippet

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 / Exemple :


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

A voir également

Ajouter un commentaire

Commentaires

takali
Messages postés
29
Date d'inscription
mardi 19 avril 2005
Statut
Membre
Dernière intervention
13 octobre 2008
-
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
takali
Messages postés
29
Date d'inscription
mardi 19 avril 2005
Statut
Membre
Dernière intervention
13 octobre 2008
-
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 ?

Voila

J'espere avoir bientôt une reponse

En tous cas

bon boulot

Emilie
chimelpremier
Messages postés
544
Date d'inscription
vendredi 5 décembre 2003
Statut
Membre
Dernière intervention
20 mai 2005
-
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=''+chaine+''
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>


Recherche de texte dans tout le document

<form name="form" method="post" action="index.html">
Rechercher :




</form>


un texte qui ne sert à rien d'autre qu'à illustrer
la fonctionnalité de ce script

un texte qui ne sert à rien d'autre qu'à illustrer
la fonctionnalité de ce script

un texte qui ne sert à rien d'autre qu'à illustrer
la fonctionnalité de ce script

un texte qui ne sert à rien d'autre qu'à illustrer
la fonctionnalité de ce script

un texte qui ne sert à rien d'autre qu'à illustrer
la fonctionnalité de ce script

un texte qui ne sert à rien d'autre qu'à illustrer
la fonctionnalité de ce script



Comment ça marche :


J'ai utilisé les méthodes indexOf() et substr() pour chercher les occurences de la chaine en évitant les tags HTML. Puis reconstruction de la page dans la variable doc2.



</html>
rttb
Messages postés
290
Date d'inscription
jeudi 26 août 2004
Statut
Membre
Dernière intervention
25 avril 2008
-
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(""+chaine+"");

tu mets :
motrecherche.pasteHTML(''+chaine+'');

Tous les 'delires' des CSS applicables au texte sont possibles, la fonction reecris le code html, alors tu fais ce que tu veux..
theXman
Messages postés
37
Date d'inscription
mardi 25 février 2003
Statut
Membre
Dernière intervention
11 mars 2006
-
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

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.