web-dev-qa-db-ja.com

CSSセレクターで属性の大文字小文字を区別しない

HTML要素がある場合<input type="submit" value="Search" /> cssセレクターは大文字と小文字を区別する必要があります：

input[value='Search']一致

input[value='search'] 一致していません

大文字と小文字を区別しないアプローチも機能するソリューションが必要です。Selenium 2とJqueryを使用しているので、両方の回答を歓迎します。

jqueryjquery-selectorscss-selectorscase-insensitiveselenium-webdriver
35
Alp

現在はCSS4に存在します。 この答え を参照してください。

それ以外の場合は、jQueryの場合、次を使用できます...

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

jsFiddle 。

カスタムセレクターを作成することもできます...

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

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

jsFiddle 。

カスタムセレクターは、これを1度実行すると少々やりすぎですが、アプリケーションで何度も使用する必要がある場合は、良い方法です。

更新

任意の属性にそのようなカスタムセレクターを設定することは可能ですか？

確かに、次の例をチェックしてください。少し複雑です（_:input[value:toLowerCase="search"]_などの構文の方が直感的だったかもしれません）が、機能します:)

_$.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 。

おそらくeval()を使用してその文字列を配列にすることができますが、この方法を使用する方が快適です（セレクターに配置したコードを誤って実行することはありません）。

代わりに、_,_区切り文字で文字列を分割し、各配列メンバーの両側の空白、_'_と_"_を削除します。引用符内の_,_は文字どおりに扱われないことに注意してください。文字通り必要な理由はありませんが、この可能性に対しては常にコーディングできます。それはあなたにお任せします。 :)

map() が最高のブラウザサポートを持っているとは思わないので、args配列または Arrayオブジェクト 。

33
alex

CSS4（CSS Selector Level 4）がサポートを追加します。

input[value='search' i]

トリックを行うのは、末尾の「i」です。

2016年半ばに広範な採用が始まった：Chrome（v49以降）、Firefox（v47から？）、Operaと他の一部はそれを持っている。IE not and Edge not yet。See “ Can I use” ...

55
Robert Siemer
input[value='Search'] matches
input[value='search' i] Also matches in latest browsers

サポート：バージョン：Chrome> = 49.0、Firefox（Gecko）> = 47.0、Safari> = 9

7
ankit

セレクターだけでそれを行うことはできません、試してください：

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