El selector CSS no es sensible a los atributos

Si tengo un elemento HTML un selector CSS debe ser sensible a mayúsculas y minúsculas:

input[value='Search'] coincidencias

input[value='search'] no coincide

Necesito una solución donde el enfoque insensible a las mayúsculas y minúsculas también funciona. Estoy usando Selenium 2 y Jquery , por lo que las respuestas para ambos son bienvenidas.

Ahora existe en CSS4, mira esta respuesta .

De lo contrario, para jQuery, puede usar …

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

jsFiddle .

También puedes hacer un selector personalizado …

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

jsFiddle .

El selector personalizado es un poco exagerado si lo hace una vez, pero si necesita usarlo muchas veces en su aplicación, puede ser una buena idea.

Actualizar

¿Es posible tener ese tipo de selector personalizado para cualquier atributo?

Claro, mira el siguiente ejemplo. Es un poco intrincado (syntax como :input[value:toLowerCase="search"] puede haber sido más intuitivo), pero funciona 🙂

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

Probablemente eval() usar eval() para hacer que esa cadena sea una matriz, pero me parece que hacerlo de esta manera es más cómodo (y no ejecutarás accidentalmente ningún código que coloques en tu selector).

En su lugar, estoy dividiendo la secuencia , delimitador y luego eliminando el espacio en blanco, ' y " cada lado de cada miembro de la matriz. Tenga en cuenta que a , dentro de una cita no se tratará literalmente. No hay razón para que se lo solicite literalmente. pero siempre puedes codificar contra esta posibilidad. Te lo dejo a ti 🙂

No creo que map() tenga la mejor compatibilidad con el navegador, por lo que puede iterar explícitamente sobre la matriz args o boost el objeto Array .

CSS4 (CSS Selector Level 4) le agrega soporte:

 input[value='search' i] 

Es la “i” al final lo que hace el truco.

La adopción más amplia comenzó a mediados de 2016: Chrome (desde v49), Firefox (desde v47?), Opera y algunos otros lo tienen. IE no y Edge aún no. Consulte “¿Puedo usar” …

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

Soporte: versión: Chrome> = 49.0, Firefox (Gecko)> = 47.0, Safari> = 9

No puede hacerlo solo con selectores, intente:

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