Surligner texte rechercher : sensible à la casse

Version imprimable

Bonjour,
j'ai trouvé un petit script sympa qui surligne le mot clé recherché.
Toutefois, il ne réponds pas à 3 critères:

1) J'aimerais qu'il ne tienne pas compte des minuscules ou majsucules.
2) Qu'il fasse la recherche même si le mot n'est pas tapé en entier...
3) il n'est pas multicritère...

Sachant que je ne peux pas installer du PHP, quelqu'un connait il un script adapté?
EDIT:
J'entends pas multicritère le fait qu'il y qu'UN seul champs de saisie mais dans lequel on pourrait mettre 2 mots clés pas forcement accolés... ;)

Code:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Surlignage</title>
<style type="text/css">
body {margin:0;padding:0;color:#009}
#pge {width:500px;margin:20px auto;}
a {text-decoration:none;color:#909}
span {background-color: #F7FF3C; border:1px solid green;}
</style>
<script type="text/javascript">
function srl(){var t=document.getElementById('mtx'),c=t.innerHTML,m=document.getElementById('mmt').value,r;
  c=c.replace(/<\/?span>/ig,''); // pas de surlignage
    if (m) {r=new RegExp("\\b"+m+"\\b","g");
      // surlignage des mots \b une coupuere de mot
        c=c.replace(r,"<span>"+m+"</span>");}
    t.innerHTML=c;
}
</script>
 
</head>
<body>
<div id="pge">
<p><input type"text" id="mmt" value="dolor"> <a href="javascript:srl()" title="Surligner le mot ci-joint">Rechercher</a></p>
<div id="mtx">
 
<p>Vivamus Nam accumsan id orci at rhoncus egestas feugiat dolor Nullam. Sapien sagittis convallis dolor condimentum sapien mauris eu congue pretium Morbi. Curabitur et elit at justo sapien Pellentesque lacinia Morbi netus adipiscing. Elit tristique dui libero libero et libero gravida nibh leo pellentesque. Facilisis Curabitur in purus odio laoreet penatibus cursus.</p>
<p>Id urna sem Curabitur urna Integer ut Praesent diam Aliquam massa. Risus vel habitasse urna Cras et elit venenatis Suspendisse libero Phasellus. Est id ac sed nibh wisi vitae fringilla justo feugiat Proin. Lacinia et ut quis sit dolor cursus nisl facilisi at senectus. Dui id eu pede vel massa Nam mauris volutpat tempus pretium. Tristique Pellentesque mattis tincidunt.</p>
<p>Leo euismod consequat eget justo sollicitudin id tristique justo id tempus. Massa purus adipiscing at porttitor porta mauris Cum ultrices Nam enim. Maecenas Nullam vel Sed porta consectetuer elit dolor ligula quis ligula. Nulla vel at mus nunc Mauris molestie nunc elit tincidunt hendrerit. Et est Phasellus Nulla Sed massa nisl dui est pretium tincidunt. Wisi urna arcu.</p>
</div>
 
</div>
</body>
</html>

08/04/2014, 08h58
SpaceFrog

1) J'aimerais qu'il ne tienne pas compte des minuscules ou majsucules.

Code:

if (m) {r=new RegExp("\\b"+m+"\\b","gi");

2) Qu'il fasse la recherche même si le mot n'est pas tapé en entier...
il suffit de lancer la fonction sur le keyup de la zone de saisie

3) il n'est pas multicritère...
le plus simple serait de splitter la saisie sur l'espace et boucler sur l'array obtenu pour lancer la fonction de surlignage
08/04/2014, 12h40
benjea06

Merci pour cette ligne SpaceFrog.
Vu mon niveau javascript, j'ai quand même plus intérêt à trouver un script tout fait..
Je cherche et l'affiche pour qui est intéressé dès que j'ai trouvé! ;)

SpaceFrog,
en attendant que je trouve le script ou que je progresse pour finaliser celui-ci, pourrais tu me dire comment faire en sorte que le "replace" ne remplace pas les majuscule suite à ta modification de code stp?
08/04/2014, 14h22
SpaceFrog

En jouant avec les groupes de capture de la regexp
http://jsfiddle.net/jbq8G/1

Merci pour le code.
Je ne sais pas utiliser JSFiddle.
J'ai donc copié le code dans mon fichier html comme ceci et ca ne marche pas...
J'ai loupé quelque chose?

Code:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Surlignage</title>
<style type="text/css">
.surlignage {
    background-color: yellow;
}
body {margin:0;padding:0;color:#009}
#pge {width:500px;margin:20px auto;}
a {text-decoration:none;color:#909}
span {background-color: #F7FF3C; border:1px solid green;}
</style>
<script type="text/javascript">
document.getElementById('search').addEventListener('click', srl);
 
function srl() {
     t = document.getElementById('mtx');
     c = t.innerHTML;
     m = document.getElementById('mmt').value;
 
 
 
    c = c.replace(/<\/?span[^>]*>/ig, ''); // pas de surlignage
    if (m) {
        r = new RegExp("\\b(" + m + ")\\b", "gi");
        // surlignage des mots \b une coupuere de mot
         c = c.replace(r, '<span class="surlignage">$1</span>');
    }
    t.innerHTML = c;
}
</script>
 
</head>
<body>
<div id="pge">
    <p>
        <input type "text" id="mmt" value="dolor" />
        <input type="button" value="Rechercher" id="search" />
    </p>
    <div id="mtx">
        <p>Vivamus Nam accumsan id orci at rhoncus egestas feugiat dolor Nullam. Sapien sagittis convallis dolor condimentum sapien mauris eu congue pretium Morbi. Curabitur et elit at justo sapien Pellentesque lacinia Morbi netus adipiscing. Elit tristique dui libero libero et libero gravida nibh leo pellentesque. Facilisis Curabitur in purus odio laoreet penatibus cursus.</p>
        <p>Id urna sem Curabitur urna Integer ut Praesent diam Aliquam massa. Risus vel habitasse urna Cras et elit venenatis Suspendisse libero Phasellus. Est id ac sed nibh wisi vitae fringilla justo feugiat Proin. Lacinia et ut quis sit. Dolor cursus nisl facilisi at senectus. Dui id eu pede vel massa Nam mauris volutpat tempus pretium. Tristique Pellentesque mattis tincidunt.</p>
        <p>Leo euismod consequat eget justo sollicitudin id tristique justo id tempus. Massa purus adipiscing at porttitor porta mauris Cum ultrices Nam enim. Maecenas Nullam vel Sed porta consectetuer elit dolor ligula quis ligula. Nulla vel at mus nunc Mauris molestie nunc elit tincidunt hendrerit. Et est Phasellus Nulla Sed massa nisl dui est pretium tincidunt. Wisi urna arcu.</p>
    </div></body>
</html>

08/04/2014, 16h06
benjea06

J'ai déjà trouvé comment faire en sorte que le mot ne soit pas à saisir en entier:

Code:

if (m) {r=new RegExp("\\b"+m+"\\b","gi");

Recherche "te" = ne renverra pas "test"

Code:

if (m) {r=new RegExp(m,"gi");

Recherche "te" = renverra "test" en surlignant "te"
Je m'approche! ;)
09/04/2014, 08h25
SpaceFrog

Oui tu a manqué le fait de lancer du code avant que les objets ne soient instanciés...
=> onload
09/04/2014, 11h58
benjea06

SpaceFrog,
Je te remercie pour ton aide.
Pardon pour mon ignorance.
Cela me fait découvrir tardivement XML et je pense que je vais plutot m'orienter vers cette solution.
Cela va me permettre de mieux gérer la base de données car pour l'instant tout était dans une page html pénible à remplir.
J'ai commencé à faire des recherches, mais comme je ne trouve pas ce que je veux, je vais aller poster dans XML...
Thanks again! ;)