Recherche et surbrillance

Télécharger le projet
Commenter

Description

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


<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!
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (f bnkcm)