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 !

RECHERCHE ET SURBRILLANCE


Information sur la source

Catégorie :Divers Classé sous : recherche, colorisation, surbrillance Niveau : Débutant Date de création : 03/09/2006 Date de mise à jour : 03/09/2006 15:42:32 Vu / téléchargé: 4 879 / 331

Note :
9,5 / 10 - par 2 personnes
9,50 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (5)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
C'est le premier code que je poste ici, c'est un code qui trainait sur mon poste il y a quelque temps, je le mets donc ici pour le partager avec vous.
Il sajit d'une fonctionne qui va mettre en surbrillance les mots cherchés qui se trouvent sur la page. J'ai utilisé la balise "span" pour faire la colorisation.
Le code est plus ou moins commenté, c'est très simple en fait.
J'espère que certains vont trouver utile.
C'est compatible IE et FireFox mais pas testé pour les autres.

 

Source

  • <html>
  • <head>
  • <title>
  • Recherche et Surbrillance
  • </title>
  • <script type"text/javascript">
  • /*
  • / ©2006 FBNKCMaster
  • / J'rigole ;-p c'est libre utilisez le comme vous voulez!!
  • */
  • function trouverMots(chaine)
  • {
  • // On vide le champs de saisi, sinon ça va nous créer des problemes
  • document.getElementById('rechDsPg').value = '';
  • // On définit les variables qui constituent la balise de colorisation
  • var ouvrirBalise = '<span style="background-color: ';
  • var frmOvrBalise = ';">';
  • var fermerBalise = '</span>';
  • // la variable doc qui contient l'html du la partie body
  • var doc = document.body.innerHTML;
  • // j pour l'incrementation
  • var j = 0;
  • // un tableau de couleurs, j'ai choisi huits couleurs à vous de mettre autant que vous voulez
  • var arrayClrs = new Array("#FFFF00", "#66FFFF", "#33FF33", "#3333FF", "#FF9900", "#FF33FF", "#CCFF00", "#FF0000");
  • // On découpe la chaine à chercher et on recupère un tableau de mots
  • tablMots = chaine.split(' ');
  • // On essaye d'effacer la colorisation existante suite à la recherche précédente
  • rchSupp = new RegExp( '(' + ouvrirBalise + '[^><]*>)' , 'gi');
  • doc = doc.replace(rchSupp, '');
  • rchSupp = new RegExp( '(' + fermerBalise + ')' , 'gi');
  • doc = doc.replace(rchSupp, '');
  • // Ici on remplace chaque mot trouvé par lui même entouré de la balise de colorisation
  • for (i = 0; i < tablMots.length; i++)
  • {
  • // Si j dépasse le nombre de couleurs que nous avons définit dans le tableau on remet tout à zéro
  • if (j >= arrayClrs.length) {j = 0;}
  • // Le mot cherché doit avoir plus de deux caractères et ne soit pas une chaine vide
  • if (tablMots[i] != '' && tablMots[i].length > 2)
  • {
  • // Recgercge du mot par expression relationnelle et remplacement dans doc
  • rch = new RegExp( '(' + tablMots[i] + ')' , 'gi');
  • ouvrBalise = ouvrirBalise + arrayClrs[j] + frmOvrBalise;
  • doc = doc.replace(rch, ouvrBalise + '$1' + fermerBalise);
  • j += 1;// Incrementation de j le nombre de mots cherchés qui répondent aux conditions (!= '' et > 2)
  • }
  • }
  • // On réecrit la partie body
  • document.body.innerHTML = doc;
  • }
  • </script>
  • </head>
  • <body>
  • <p>
  • Rechercher :
  • <input id="rechDsPg" type="text" value="" name="rechDsPg" />
  • <input type="button" onclick="trouverMots(document.getElementById('rechDsPg').value);" value="OK">
  • </p>
  • <p>
  • Voici un texte pour montrer et illustrer la fonctionnalité du script de recherche colorisée au sein de la page, une colorisation comme "surbrillance" de google mais ici c'est à impléménter dans vos pages
  • </p>
  • </body>
  • </html>
<html>
	<head>
		<title>
			Recherche et Surbrillance
		</title>
		<script type"text/javascript">
			/*
			/ ©2006 FBNKCMaster 
			/ J'rigole ;-p c'est libre utilisez le comme vous voulez!! 
			*/
			function trouverMots(chaine)
			{
				// On vide le champs de saisi, sinon ça va nous créer des problemes
				document.getElementById('rechDsPg').value = '';
				// On définit les variables qui constituent la balise de colorisation
				var ouvrirBalise = '<span style="background-color: ';
				var frmOvrBalise = ';">';
				var fermerBalise = '</span>';
				// la variable doc qui contient l'html du la partie body
				var doc = document.body.innerHTML;
				// j  pour l'incrementation
				var j = 0;
				// un tableau de couleurs, j'ai choisi huits couleurs à vous de mettre autant que vous voulez
				var arrayClrs = new Array("#FFFF00", "#66FFFF", "#33FF33", "#3333FF", "#FF9900", "#FF33FF", "#CCFF00", "#FF0000");
				// On découpe la chaine à chercher et on recupère un tableau de mots
				tablMots = chaine.split(' ');
				// On essaye d'effacer la colorisation existante suite à la recherche précédente
				rchSupp = new RegExp( '(' + ouvrirBalise + '[^><]*>)' , 'gi');
				doc = doc.replace(rchSupp, '');
				rchSupp = new RegExp( '(' + fermerBalise + ')' , 'gi');
				doc = doc.replace(rchSupp, '');
				// Ici on remplace chaque mot trouvé par lui même entouré de la balise de colorisation
				for (i = 0; i < tablMots.length; i++)
				{
					// Si j dépasse le nombre de couleurs que nous avons définit dans le tableau on remet tout à zéro
					if (j >= arrayClrs.length) {j = 0;}
					// Le mot cherché doit avoir plus de deux caractères et ne soit pas une chaine vide
					if (tablMots[i] != '' && tablMots[i].length > 2)
					{
						// Recgercge du mot par expression relationnelle et remplacement dans doc
						rch = new RegExp( '(' + tablMots[i] + ')' , 'gi');
						ouvrBalise = ouvrirBalise + arrayClrs[j] + frmOvrBalise;
						doc = doc.replace(rch, ouvrBalise + '$1' + fermerBalise);
						j += 1;// Incrementation de j le nombre de mots cherchés qui répondent aux conditions (!= '' et > 2)
					}
				}	
				// On réecrit la partie body
				document.body.innerHTML = doc;
			}   
		</script>
	</head>
	<body>    
		<p>
			Rechercher : 
			<input id="rechDsPg" type="text" value="" name="rechDsPg" />
			<input type="button" onclick="trouverMots(document.getElementById('rechDsPg').value);" value="OK">
		</p>
		<p>  
			Voici un texte pour montrer et illustrer la fonctionnalité du script de recherche colorisée au sein de la page, une colorisation comme "surbrillance" de google mais ici c'est à impléménter dans vos pages
		</p> 
	</body>
</html>

Conclusion

Le code demandera un peu d'amélioration pour empêcher, par exemple, la colorisation des balises html qui portent un nom qui figure parmis les mots cherchés ce qui provoque un truc pas bien à voir :s...
Si j'aurais plus de temps je bosserai dessus sinon c'est la dernière semaine des vacances :( bientôt le boulot!
Vos remarques et critiques pour améliorer le code seront les bienvenus!
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

03 septembre 2006 15:42:32 :
j'ai modifié le zip endommagé.

Commentaires et avis

signaler à un administrateur
Commentaire de f bnkcm le 06/09/2006 22:56:36

Alors, y a rien à dire à propos de cette source? Quelque chose pour l'optimiser, l'améliorer?

signaler à un administrateur
Commentaire de jacques-antoine le 11/09/2006 18:34:02

Le problème est qu'il y a une contrainte de longueur de mot ajoutée à celle de la présence d'un blanc séparateur... Ce serait bien de chercher un ou plusieurs critères associés à des conditions ET et OU en utilisant des parenthèses. J'ai eu ce problème à traiter pour une de mes applis et j'ai résolu le cas des balises en les virant purement et simplement avant traitement mais après avoir fait un relevé topographique de chacune d'elles. Par la suite, il suffit de fusionner l'ensemble des mots du texte initial en y intégrant les balises précédemment éliminées. L'avantage est qu'on peut rechercher des portions de mots, des mots entiers ou des groupes de mots et utiliser des critères multiples ... J'ai fait ça en php et ça tourne au poil. J'ai même intégré les critères extraits et leurs relations dans une requête mysql... sauf qu'il y a comme un problème dans la résolution des priorités, mais ce n'est pas le sujet du jour...

signaler à un administrateur
Commentaire de taijah le 19/01/2007 21:24:44

Ce script est tout à fait merveilleux, en plein ce que je cherchais.  Merci de l'avoir partagé!

signaler à un administrateur
Commentaire de thems le 21/09/2007 20:02:15

Bonsoir, j'essaie d'utiliser ce script dans une page html mais il ne fonctionne pas.
Faut'il modifier ou compléter ce code, et comment?

Merci à tous

signaler à un administrateur
Commentaire de victor110 le 11/11/2007 15:34:30 9/10

tres bien mais comment faire pour rechercher dans une iframe.
9/10
merci d'avance

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Rechercher dans un fichier texte [ par gg16819 ] BonjourJe souhaiterais faire un petit moteur de recherche en javascript. Pour cela, je dois pouvoir ouvrir des fichiers externes (html et texte) et pa Recherche script javascript pour menu deroulant [ par devess ] Bonjour,J'ai cherché mais je n'ai pas trouvé de script javascript pour faire des menus déroulants avec un affichage d'une fenêtre lors du passage curs Recherche script javascript pour menu deroulant [ par devess ] Bonjour,J'ai cherché mais je n'ai pas trouvé de script javascript pour faire des menus déroulants avec un affichage d'une fenêtre lors du passage curs HELP - RECHARGER LES FRAMES - HELP [ par Yeltaz ] Bonjour,Je recherche un script qui permette de recharger les frames d'un site lorsque l'on arrive sur une page par l'intermédiaire d'un moteur de rech recherche javascript fenetre flottante bas droit [ par redbrain ] bjr, je cherche un javascript qui permette de mettre dans une page html, une fenetre dans un coin en bas et a droite (ou s'affiche une autre page ht script d'ouverture [ par pronovost ] Bonjour.Je suis en charge de faire la page Intranet de ma compagnie. Sur celle-ci j'ai un engin de recherche qui parcours les archives de la compagnie Recherche dans un tableau js [ par dridri ] Bonjour,Voila j'ai une question qui m'embète pas mal. Je voudrais savoir s'il était possible de faire une recherche dans un tableau js contenant des d Recherche d'un créateur de banniere [ par Xtaz67 ] Salut, je ebute en webmaster et la je cree mon site qui est sur un jeu.j'ai un peu de mal a le decorer.Ca serai sympa si une personne qui arrive bien recherche aide [ par g2m ] nouveau dans la création de site, je bute sur une chose simple, créer un menu déroulant horizontale avec survol.Un truc simple quoi!Dans cette barre 8 recherche un script de recherche interne au site [ par GLK ] salut tout le monde, je cherche un script (à mettre dans une frame) qui génère un moteur de recherche INTERNE (recherche par rapport au contenu du sit


Nos sponsors

Sondage...

CalendriCode

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, 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
Temps d'éxécution de la page : 0,328 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.