Recherche et surbrillance

Soyez le premier à donner votre avis sur cette source.

Vue 12 194 fois - Téléchargée 583 fois

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!

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
dimanche 15 octobre 2006
Statut
Membre
Dernière intervention
7 novembre 2009

excellent mm j'ai pas encore tester mais d'aprés les autres amis
Messages postés
86
Date d'inscription
vendredi 20 octobre 2006
Statut
Membre
Dernière intervention
13 mai 2010

tres bien mais comment faire pour rechercher dans une iframe.
9/10
merci d'avance
Messages postés
1
Date d'inscription
vendredi 21 septembre 2007
Statut
Membre
Dernière intervention
21 septembre 2007

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
Messages postés
2
Date d'inscription
vendredi 11 juin 2004
Statut
Membre
Dernière intervention
19 janvier 2007

Ce script est tout à fait merveilleux, en plein ce que je cherchais. Merci de l'avoir partagé!
Messages postés
79
Date d'inscription
mardi 7 octobre 2003
Statut
Membre
Dernière intervention
22 mai 2017

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...
Afficher les 6 commentaires

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.