javascript - examples - jQuery selector expresiones regulares

jquery selector examples

Question

Estoy después de la documentación sobre el uso de comodines o expresiones regulares (no estoy seguro de la terminología exacta) con un selector jQuery.

Lo busqué yo mismo, pero no he podido encontrar información sobre la sintaxis y cómo usarla. ¿Alguien sabe dónde está la documentación de la sintaxis?

EDITAR: los filtros de atributos le permiten seleccionar según los patrones de un valor de atributo.

Answer 1

Añadir una función jQuery,

(function($){
$.fn.regex = function(pattern, fn, fn_a){
var fn = fn || $.fn.text;
return this.filter(function() {
return pattern.test(fn.apply($(this), fn_a));
});
};
})(jQuery);

Entonces,

$(''span'').regex(/Sent/)

seleccionará todos los elementos del tramo con coincidencias de texto / Enviado /.

$(''span'').regex(/tooltip.year/, $.fn.attr, [''class''])

seleccionará todos los elementos de span con sus clases coincidentes /tooltip.year/.

Answer 2

Estos pueden ser útiles.

Si lo encuentras por Contains entonces será así.

 $("input[id*=''DiscountType'']").each(function (i, el) {
//It''ll be an array of elements
});

Si lo encuentras por Empieza con, entonces será así.

 $("input[id^=''DiscountType'']").each(function (i, el) {
//It''ll be an array of elements
});

Si lo encuentras por Ends With entonces será así.

 $("input[id$=''DiscountType'']").each(function (i, el) {
//It''ll be an array of elements
});

Si desea seleccionar elementos cuya ID no sea una cadena dada

 $("input[id!=''DiscountType'']").each(function (i, el) {
//It''ll be an array of elements
});

Si desea seleccionar elementos cuya ID contenga una palabra determinada, delimitada por espacios

 $("input[id~=''DiscountType'']").each(function (i, el) {
//It''ll be an array of elements
});

Si desea seleccionar elementos cuyo id es igual a una cadena dada o comenzar con esa cadena seguida de un guión

 $("input[id|=''DiscountType'']").each(function (i, el) {
//It''ll be an array of elements
});

Answer 3

James Padolsey creó un filtro maravilloso que permite utilizar expresiones regulares para la selección.

Digamos que tienes el siguiente div :

<div class="asdf">

Padolsey :regex filter puede seleccionarlo así:

$("div:regex(class, .*sd.*)")

Asimismo, consultar la documentación oficial sobre los selectores .

Answer 4

Los identificadores y las clases siguen siendo atributos, por lo que puede aplicarles un filtro de atributo de expresión regular si los selecciona de la forma correspondiente. Lea más aquí: http://rosshawkins.net/archive/2011/10/14/jquery-wildcard-selectors-some-simple-examples.aspx

Answer 5

Puede utilizar la función de filter para aplicar una coincidencia de expresiones regulares más complicada. Aquí hay un ejemplo que podría coincidir con los primeros tres divs (demostración en vivo here ):

<div id="abcd"></div>
<div id="abccd"></div>
<div id="abcccd"></div>
<div id="abd"></div>

$(''div'')
.filter(function() {
return this.id.match(/abc+d/);
})
.html("Matched!");

Answer 6

Si solo desea seleccionar elementos que contengan una cadena dada, puede usar el siguiente selector:

$('':contains("search string")'')

Answer 7

Si su uso de la expresión regular se limita a probar si un atributo comienza con una cadena determinada, puede usar el selector ^ jquery

Por ejemplo, si desea seleccionar solo div con id comenzando con "abc", puede usar $("div[id^=''abc'']")

Se pueden encontrar muchos selectores muy útiles para evitar el uso de expresiones regulares aquí: http://api.jquery.com/category/selectors/attribute-selectors/

Answer 8

Solo estoy dando mi ejemplo en tiempo real:

En JavaScript nativo, utilicé el siguiente fragmento de código para encontrar los elementos con los identificadores que comienza con "select2-qownerName_select-result".

document.querySelectorAll("[id^=''select2-qownerName_select-result'']");

Cuando cambiamos de javascript a jQuery, reemplazamos el fragmento anterior con el siguiente, que implica menos cambios de código sin alterar la lógica.

$("[id^=''select2-qownerName_select-result'']")

Answer 9

$("input[name=''option[colour]''] :checked ")

Answer 10

var test = $(''#id'').attr(''value'').match(/[^a-z0-9 ]+/);

¡Aqui tienes!