CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresGuide achatConnexion

begin process at 2009 07 06 02:23:46

SILVERLIGHT 3 : COMMUNICATION ET MULTICAST par KooKiz

[PERSO] DéCOUVERTES ESTIVALES : LINUX (PART I) par FREMYCOMPANY

[REFACTORING] RESHARPER POUR VISUAL STUDIO 2010 (PREVIEW) par tja

[REFACTORING] ANALYSER VOS EXCEPTIONS AVEC RESHARPER EXCEPTIONAL par tja

SHAREPOINT 2007 : PATTERNS & PRACTICES SHAREPOINT GUIDANCE par phil

RE : BOUCLES ! par cedcyr

BOUCLES ! par cedcyr

CODE POUR EDITEUR DE TEXTE AVEC PRISE EN CHARGE DU COPIER/COLLER GARDANT LA MISE EN FORME par lolhangman

RE : COMMENT RéCUPéRER LES VARIABLES DE PLUSIEURS FORMULAIRES POUR OUVRIR FICHIER EXCEL par Bul3

+ de logiciels à télécharger

1 464 966 membres
20 nouveaux aujourd'hui
15 046 membres club

Trouver une ressource

Trouvez une ressource parmi 40 094 codes, 1 303 047 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

COLORISE LES MOTS D'UNE PAGE (APRES RECHERCHE)

Information sur la source

Catégorie :Trucs & Astuces Niveau : Débutant Date de création : 14/11/2004 Vu : 3 798

Auteur : rttb

Site perso

Ecrire un message privé

Ce membre participe au partage de revenus publicitaires

Note :

4,00 / 10

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

AVION PUBLICITAIRE

PAGE QUI S'ADAPTE (REDIMENSIONNE) UNE IFRAME

UNE JAUGE ENTIÈREMENT PARAMÉTRABLE

JAUGE QUI OBÉIT AU DOIGT ET À L'OEIL

EFFET DE TEXTE DANS LA BARRE DE STATUS

Toutes les sources de rttb

Sources de la même categorie

IPV4 AVEC RIP par totama

TRI DÉCROISSANT ET CROISSANT D'UN TABLEAU DYNAMIQUE REMPLIE ... par barbe91

TABLEAU ASSOCIATIF (DYNAMIQUE) par nopnop77

DIV TOTALEMENT AUTOMATIQUE VERTICAL AVEC PLEIN DE COMMANDES... par abdelaziz_info

TROUVER LES FACTEURS D'UN NOMBRE par jdmcreator

Toutes les sources de la catégorie Trucs & Astuces

Commentaires et avis

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

ç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

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

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