Sélecteur CSS insensible à la casse pour les attributs

Question

Si j'ai un élément HTML , un sélecteur CSS doit être sensible à la casse :

input[value='Search'] correspond

input[value='search'] ne correspond pas

J'ai besoin d'une solution où l'approche insensible à la casse fonctionne aussi. J'utilise Selenium 2 et Jquery, donc des réponses pour les deux sont les bienvenues.

Answer 1

CSS4 (Niveau 4 des sélecteurs CSS) ajoute le support pour cela :

input[value='search' i]

C'est le "i" à la fin qui fait l'astuce.

L'adoption plus large a commencé à la mi-2016 : Chrome (depuis la v49), Firefox (à partir de la v47 ?), Opera et quelques autres l'ont. IE non et Edge depuis qu'il utilise Blink. Voir “Puis-je l'utiliser”...

Answer 2

Il existe maintenant en CSS4, voir cette réponse.

Sinon, pour jQuery, vous pouvez utiliser...

$(':input[name]').filter(function() {
   return this.value.toLowerCase() == 'search';
});

jsFiddle.

Vous pourriez également créer un sélecteur personnalisé...

$.expr[':'].valueCaseInsensitive = function(node, stackIndex, properties){
     return node.value.toLowerCase() == properties[3];
};

var searchInputs = $(':input:valueCaseInsensitive("Search")');

jsFiddle.

Le sélecteur personnalisé est un peu exagéré si vous le faites une fois, mais si vous devez l'utiliser plusieurs fois dans votre application, cela peut être une bonne idée.

Mise à jour

Est-il possible d'avoir ce type de sélecteur personnalisé pour n'importe quel attribut ?

Bien sûr, consultez l'exemple suivant. C'est un peu compliqué (une syntaxe telle que :input[value:toLowerCase="search"] aurait pu être plus intuitive), mais cela fonctionne :)

$.expr[':'].attrCaseInsensitive = function(node, stackIndex, properties){
    var args = properties[3].split(',').map(function(arg) {
        return arg.replace(/^\s*["']|["']\s*$/g, '');  
    });
    return $(node).attr(args[0]).toLowerCase() == args[1];
};

var searchInputs = $('input:attrCaseInsensitive(value, "search")');

jsFiddle.

Vous pourriez probablement utiliser eval() pour transformer cette chaîne en un tableau, mais je trouve que faire de cette manière est plus confortable (et vous n'exécuterez accidentellement aucun code que vous placez dans votre sélecteur).

Au lieu de cela, je divise la chaîne avec le délimiteur ,, puis je supprime les espaces, les ' et les " de chaque membre du tableau. Notez qu'une , à l'intérieur de guillemets ne sera pas traitée littéralement. Il n'y a aucune raison pour laquelle elle devrait l'être littéralement, mais vous pourriez toujours coder contre cette possibilité. Je vous laisse décider. :)

Je ne pense pas que map() ait le meilleur support des navigateurs, vous pouvez donc itérer explicitement sur le tableau args ou augmenter l'objet Array.

Answer 3

input[value='Search'] correspond
input[value='search' i] Correspond également dans les navigateurs les plus récents

Support : version : Chrome >= 49.0, Firefox (Gecko) >= 47.0, Safari >= 9

Answer 4

Vous ne pouvez pas le faire avec les sélecteurs seuls, essayez :

$('input').filter(function() {
    return $(this).attr('value').toLowerCase() == 'search';
});