Surligner texte rechercher : sensible à la casse

**benjea06** · 07/04/2014, 20h33

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 :

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
 
<!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>

**SpaceFrog** · 08/04/2014, 08h58

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

Code :

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

 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

**benjea06** · 08/04/2014, 12h40

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?

**SpaceFrog** · 08/04/2014, 14h22

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

**benjea06** · 08/04/2014, 15h53

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 :

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
<!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>

**benjea06** · 08/04/2014, 16h06

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

Code :

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

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

Recherche "te" = ne renverra pas "test"

Code :

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

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

Recherche "te" = renverra "test" en surlignant "te"
Je m'approche!

**SpaceFrog** · 09/04/2014, 08h25

Oui tu a manqué le fait de lancer du code avant que les objets ne soient instanciés...
=> onload

Surligner texte rechercher : sensible à la casse

JavaScript

Vue hybride

Discussions similaires

Partager

Partager