|
 Trouver une ressource
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
 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!
 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é.
 Sources de la même categorie
Sources en rapport avec celle ci
 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
|
 Téléchargements
Logiciels à télécharger sur le même thème :
|