Accueil > > > RECHERCHE ET SURBRILLANCE
 RECHERCHE ET SURBRILLANCE
 Information sur la source
 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
- <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!
 Historique
- 03 septembre 2006 15:42:32 :
- j'ai modifié le zip endommagé.
 Sources de la même categorie
 Commentaires et avis
 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
|
Derniers Blogs
 CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT)CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY
Bonjour à tous, Je viens de publier une proposition comprenant 5 pseudo-classes pour le CSS Working Group ayant trait à l'état de chargement d'un élément (ex: IMG,VIDEO,AUDIO,OBJECT pour l'HTML.). Si le c½ur vous en dit, vous pouvez retrouver cette p...
Cliquez pour lire la suite de l'article par FREMYCOMPANY MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ?MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice
Formation initiale Durant la formation, le découpage classique est le suivant (je donnerai les équivalences Suisse lorsque je les connaîtrais) : Ecole primaire jusqu'au Collège : Formation générale permettant d'obtenir les méthodes...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENTY'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks
Quand on a ce genre d'erreur sans log :
Et bas on a juste envie de choper le gas de Microsoft qu'a développé ça et lui foutre des baffes de Coboye ! ...
Cliquez pour lire la suite de l'article par Aleks [HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET
Avec la sortie prochaine de la Beta Consumer Preview de Windows 8, j'avais envie de revenir sur une des fonctionnalités que j'attends le plus et que, en bon geek que je suis, j'utilise déjà : Hyper-V 3 ainsi son module PowerShell.
Il y a déjà pléthor...
Cliquez pour lire la suite de l'article par Pierrick CATRO-BROUILLET IIS7 - COMPRESSION GZIPIIS7 - COMPRESSION GZIP par cyril
La compression GZIP permet d'améliorer les performances de navigation en compressant ce qu'envoie le serveur à un client. Pour comprendre comment cela fonctionne, regardons ce qu'il se passe au niveau HTTP lorsqu'un client tente d'accéder à une ress...
Cliquez pour lire la suite de l'article par cyril
Logiciels
 Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|