jQuery ci permette di definire selettori personalizzati con cui operare sugli elementi. Possiamo ad esempio utilizzare le espressioni regolari per verificare se gli attributi di un dato elemento contengono un particolare pattern. Vediamo come fare.
Possiamo definire il seguente selettore:
jQuery.expr[":"].regex = function( elem, index, match ) {
var matchParams = match[3].split( "," ),
validLabels = /^(data|css):/,
attr = {
method: matchParams[0].match( validLabels ) ? matchParams[0].split( ":" )[0] : "attr",
property: matchParams.shift().replace( validLabels, "" )
},
regexFlags = "ig",
regex = new RegExp( matchParams.join("").replace(/^\s |\s $/g, ""), regexFlags );
return regex.test( jQuery( elem )[attr.method]( attr.property ) );
}
Il selettore :regex accetta due parametri: il primo è il nome dell"attributo e il secondo è l"espressione regolare. Data ad esempio la seguente marcatura:
<div id="a-test">Test</div>
<p class="test-1">Test</p>
Possiamo selezionare il primo elemento per la presenza di una vocale all"inizio del suo attributo ID e il secondo elemento per la presenza di un numero all"interno della sua classe CSS:
$( "div:regex(id,^[aeiou])" ).addClass( "test" );
$( "p:regex(class,[0-9])" ).addClass( "test" );