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

Ce site au démarrage

begin process at 2010 03 15 23:40:03

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Trucs & Astuces

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

COLORISE LES MOTS D'UNE PAGE (APRES RECHERCHE)

Information sur la source

Note :

4,00 / 10

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

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

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

ACCÈS À LA MÉTHODE SETATTRIBUTE('STYLE','') SOUS IE6 par masternico

OUTIL DE SÉLECTION par jdmcreator

SIMPLIFIER LA CREATION DYNAMIQUE D'ELEMENT HTML par kazma

DÉTECTER SI CSS EST ACTIVÉ par jdmcreator

RETROUVER LE NUMÉROS DE TELEPHONE DE VOTRE EMPLOYER RAPIDEME... par rappise

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

Ajouter un commentaire

Nos sponsors

Derniers Blogs

[WP7] L'éMULATEUR WINDOWS PHONE 7 EST MULTITâCHE par KooKiz

PRéSENTATION CLUB MOSS CE JOUR "LA NOUVELLE ARCHITECTURE DE SERVICES SHAREPOINT 2010". par Patrick Guimonet

[WINDOWPHONE7] PREMIERS PAS par Vko

[WP7] LE SDK DE WINDOWS PHONE 7 EST DISPONIBLE ! par KooKiz

SQL SERVER : PHP ET SQL SERVER par christian

Forum

RE : BBCODES: BESOIN DU SCRIPTS QUI MET LE BBCODES DANS LE FORMULAIRE par jessy51

CHRONO JAVASCRIPT DANS PAGE PHP par michaelminelli1

RE : VALIDATION D'UN FORMULAIRE par chantoung

RAFRAICHIR UNE DIV CONTENANT DU PHP par christophebuffet

PROBLèME LIGHTBOX SOUS IE8 par ronboss

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Application FLASH URGENT
Budget : 1 000€
Plaquette commerciale Urgent
Budget : 300€
Application Web service Site internet
Budget : 100€

Logiciels

Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods
Konvertor (4.00)
KONVERTOR (4.00)

Le logiciel est un gestionnaire multimedia affichant, jouant et convertissant plus de 2000 format...

Cliquez pour télécharger Konvertor