Echapper des caracteres

Invité · 29/06/2009, 16h46

Bonjours,

j'ai actuellement un petit probleme.
J'ai une liste :

Code :

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

1
2
3
4
5
6
<ul>
<li>maison</li>
<li>arbre</li>
<li>barriere</li>
</ul>
<input type="text" value=""/>

Le but, c'est de selectionner le li dont le texte correspond a la value de mon input.
Si mon input a pour value arbre, je veux alors recuperer le second li.
Pour cela, je selectionne :

Code :

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

1
2
champ = $('input').val();
monLi = $('ul li[text="+champ+"]');

Le problème, c'est lorsque mon input possède des caractères à échapper style :
champ = ' l'ar"m ';
Jai alors une erreur Jquery.

Quelqu'un a-t-il une idée pour pallier ce problème?

**danielhagnoul** · 29/06/2009, 18h44

Bonsoir.

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
 
<script type="text/javascript">
	$(document).ready(function(){
		var champ = $('input').val();
 
		//text n'est pas un attribut !
 
		//contains : Matches elements which contain the given text.
 
		var jQueryObjs = $("#maListe li:contains(" + champ + ")");
 
		console.log("champ = " + champ);
		console.log("jQueryObjs = " + jQueryObjs);
		console.log("jQueryObjs[0] = " + jQueryObjs[0]);
		console.log("jQueryObjs[0].tagName = " + jQueryObjs[0].tagName);
		console.log("jQueryObjs.parent()[0].id = " + jQueryObjs.parent()[0].id);
	});
</script>

Code :

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

1
2
3
4
5
6
7
8
 
<ul id="maListe">
	<li>maison</li>
	<li>arbre</li>
	<li>barriere</li>
	<li>l'arme d'aujourd'hui</li>
</ul>
<input type="text" value="l'arme d'aujourd'hui"/>

Invité · 01/07/2009, 00h07

merci pour ta réponse danielhagnoul.

Néanmoins, (et sans tester pour me faire taper dessus), il me semble que contains ne cherche pas l'égalité mais juste si la chaine est contenue.

Si dans l'input on avait la valeur 're', alors les li sélectionnés seraient ceux contenant les mots 'arbre' et 'barriere'.

Beaucoup de conditionnel, je testerai ca demain matin, désolé pour le retard, je ne pensais pas avoir une réponse dans la soirée du premier post !

Edit : j'ai trouvé un post sympa ici :

En gros, soit avec filter, soit avec une regex dans contains.

**danielhagnoul** · 01/07/2009, 10h16

Bonjour.

Envoyé par galerien69

Néanmoins, (et sans tester pour me faire taper dessus), il me semble que contains ne cherche pas l'égalité mais juste si la chaine est contenue.

Si dans l'input on avait la valeur 're', alors les li sélectionnés seraient ceux contenant les mots 'arbre' et 'barriere'.

C'est la définition de contains. Remarque pertinente !

Envoyé par galerien69

(et sans tester pour me faire taper dessus)

Taper sur qui ? Pouquoi ? Mon avatar a-t-il un air trop méchant ?
Il faut toujours faire des tests, ne jamais se contenter d'une possibilité, jusqu'au moment où l'on trouve chaussure à son pied.

Et voici la bonne chaussure :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <link rel="stylesheet" type="text/css" href="../lib/humanity/jquery-ui-1.7.2.custom.css" media="screen" />
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
        div#affiche {
            clear:both;
            margin:12px;
            border:1px solid #999999;
        }
    </style>
    <!-- <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> -->
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var champ = $('input').val();
 
            /*
            * Comme contains de base :
            * return eval("/" + search + "/").test($(el).text());
            *
            * Doit commencer et finir par :
            * return eval("/^" + search + "$/").test($(el).text());
            *
            * commencer et finir plus indépendant de la case :
            * return eval("/^" + search + "$/i").test($(el).text());
            *
            * toutes les combinaisons g i m sont possibles, voir docuentation RegExp
            */
            $.expr[":"].contains = function(el, i, m){
                var search = m[3];
 
                if (!search) return false;
 
                return eval("/^" + search + "$/i").test($(el).text());
            };
 
            $("#maListe li:contains(" + champ + ")").each(function(i,item){
                console.log("$(item[" + i + "]).text() = " + $(item).text());
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <ul id="maListe">
            <li>maison</li>
            <li>arbre</li>
            <li>barriere</li>
            <li>l'arme d'aujourd'hui</li>
        </ul>
        <form name="form">
            <input type="text" value="arbre"/>
        </form>
        <div id="affiche"></div>
    </div>
</body>
</html>

Invité · 04/07/2009, 12h42

re,

merci, ce bout de code m'éclaircit les idées. Je renettoierai ce que j'ai fait.
J'imagine que par défaut contains a pour regex quelquechose du style :

Code :

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

'/' + search +'/'

.
Donc en passant :

Code :

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

$('li:contains("^'+search+'$")')

, je devrais arriver au résultat escompté. Quoiqu'il en soit comme tu le dis, je vais tester ca a l'occasion. Pour l'instant, j'ai ma regex que j'applique dans each ( dans le même style que ton log, sauf que je retourne false ). Mais par contains ca serait plus joli

.

PS : ton avatar est tout trognon.

edit : on retombe sur le même probleme de l'apostrophe qui traine, mais bon, ca devrait pas etre trop genant a tester

Echapper des caracteres

jQuery

Discussions similaires

Partager

Partager