Wyrażenia regularne w JQuery – JQuery RegEx (RegExp) Selector

Zachwalać zalet JQuery chyba nie trzeba. Stosując właśnie tą bibliotekę można z czystym sumieniem powiedzieć, że postępuje się z mottem zamieszczonym na oficjalnej stronie biblioteki – Write Less, Do More.

Jednak, co dziwne, można z niej wydusić jeszcze więcej – nawet dużo, dużo więcej. Jakim sposobem? Ano, poprzez ‘nauczenie’ biblioteki posługiwaniem się wyrażeniami regularnymi.

Standardowo, nie ma zaimplementowanej tej funkcjonalności, ale dzięki Panu zwanemu James Padolsey możemy w bardzo prosty sposób wzbogać JQuery o tę funkcjonalność.

Jedyne co należy zrobić, wsiąść poniższy kod i wstawić do biblioteki. Ja zazwyczaj robię to pod koniec pliku biblioteki, przed linią.

window.jQuery = window.$ = jQuery;

A oto ten magiczny kod.

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));
}

Teraz możemy stosować w selektorach wyrażenia regularne zgodnie z metodologią JavaScript. Ja podam kilka przykładów, a po więcej informacji na ten temat, należy sięgnąć na stronę autora i do dokumentacji JavaScript.

Aby wybrać obiekty o id=’guzik’.

$(':regex(id,^guzik$)')

Aby wybrać obiekty o ID zaczynającym się na literę A lub G.

$(':regex(id,^[ag])')

Aby wybrać DIVy, które w nazwie mają przynajmniej jedną cyfrę.

('div:regex(class,[0-9])');

Aby wybrać obiekty, które mają w styl wpisaną szerokość od 100px do 300px.

$(':regex(css:width, ^[1-3]\\d{2}px$)');