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
 TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOURTECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice
Cette session est la dernière pleinière de ces 3 jours de TechDays Paris 2010. Généralement, cette troisième journée est plus axée sur l'avenir vu par Microsoft. Après un retour sur l'avenir vu par la Science Fiction ou par ...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice UNE JOLIE-HORLOGE ET PAS QU'UN PEU !UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante
Pour les possesseurs d'iPhone, ça y est Bijin Tokei - qui se traduit littéralement en Français par " Jolie Horloge " - est arrivé et GRATUITEMENT s'il vous plaît ! Après la version Tokyo, Hokkaido, night club, racing, Gal, "pour les mademoiselles'", . voi...
Cliquez pour lire la suite de l'article par neodante TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICESTECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice
Animé par: Gaetan Bouveret et Julien Chomarat Business Connectivity Services (BCS) est dans SharePoint 2010 la version 2 de Business Data Catalog (BDC dans SharePoint 2007). Il s'agit de la solution permettant de visualiser des données provenan...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion
Comme de nombreux geek, je suis un grand amateur de série TV et je rate régulièrement des épisodes de mes séries préférés. Une solution s'offre à vous avec ce merveilleux site : Tv Gorge - www.tvgorge.com Moteur de recherche à l'appui, vous pouvez ...
Cliquez pour lire la suite de l'article par orion TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|