colorier les mots clefs d'une recherche

**kimcharlene** · 29/11/2006, 23h49

bonjour

Alors tout d'abord je ne sais pas trop où je doit mettre le sujet car je ne sais pas si cela se fait en javascript ou php?

Pour recherche le titre d'un album je laisse à l'utilisateur le choix de saisir un titre en entier ou seulement un bout.
je voudrais qu'a l'affichage de la liste des titres le mot entré en recherche soit surligner (comme sous acrobat reader quand on fait une recherche)

merci

**bluzy** · 30/11/2006, 00h35

salut
essaye ce petit script, il fonctionne tres bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<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 voici montrer et illustrer VOICI 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>

**coca25** · 30/11/2006, 00h35

salut,
tu peux utiliser preg_replace pour place un ou autre devant la chaine rechercher

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
echo preg_replace ("/($chaine)/", "<font color='red'>${1}</font>", $resultat);

**gloubi** · 30/11/2006, 00h53

Le preg replace n'as pas d'interet si ta recherche est "case sensitive".
il faut alors utiliser str_replace().

Dans le cas contraire, il existe une option qui rend le preg_replace insensible à la case :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo preg_replace ("#[\s^]($chaine)[\s.]#is", "<font color='red'>\\1</font>", $resultat);

a peu de choses pres (car je dit ca de tete, et je met mes parametres de tetes aussi, et dieu sait qu'ils sont nombreux pour les preg), cette version doit etre insensible a la case et ne prendre que les mots entier et isolé (genre pas détecter (west si tu cherche est).

**kimcharlene** · 30/11/2006, 10h32

Bonjour

C'est exactementça que je cherchais.
je vais privilégier la version php qui est compatible tout navigateur mais surtout plus simple a mettre en place.

merci

colorier les mots clefs d'une recherche [RegEx]

Langage PHP

Discussions similaires

Partager

Partager