Echapper des caracteres

Version imprimable

29/06/2009, 16h46
Invité

Echapper des caracteres
Bonjours,

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

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:

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?

Bonsoir.

Code:

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:

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"/>

01/07/2009, 00h07
Invité

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.

Bonjour.

Citation:

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 !

Citation:

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:

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>

04/07/2009, 12h42
Invité

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:

'/' + search +'/'

.
Donc en passant :

Code:

$('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 :mouarf:.

PS : ton avatar est tout trognon. :zoubi:

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