Regex Selector for jQuery - James Padolsey

jquery.regex-selector.js

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

Regex Selector for jQuery – James Padolsey

A while ago I published an article explaining the utter awesomeness of extending jQuery’s filter selectors. Building on that here’s something new; a regular expression selector. jQuery’s current attribute selectors (CSS3) do allow basic regex notation but no where near as much as this:

:regex

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[].match(validLabels) ? 
                        matchParams[].split(':')[] : '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));
}

Usage

It’s pretty simple to use, you need to pass an attribute and a regular expression to match against. The regular expression must be in non-literal notation; so replace all backslashes with two backslashes (e.g. ^w+$ -> ^\w+$).

// Select all elements with an ID starting a vowel:
$(':regex(id,^[aeiou])');

// Select all DIVs with classes that contain numbers:
$('div:regex(class,[0-9])');

// Select all SCRIPT tags with a SRC containing jQuery:
$('script:regex(src,jQuery)');

// Yes, I know the last example could be achieved with 
// CSS3 attribute selectors; it's just an example...

Note: All searches are case insensitive; you can change this by removing the ‘i’ flag in the plugin.

This plugin also allows you to query CSS styles with regular expressions, for example:

// Select all elements with a width between 100 and 300:
$(':regex(css:width, ^[1-3]\d{2}px$)');

// Select all NON block-level DIVs:
$('div:not(:regex(css:display, ^block$))');

Additionally it allows you to query data strings added to elements via jQuery’s ‘data’ method:

// Add data property to all images (just an example);
$('img').each(function(){
    $(this).data('extension', $(this)[].src.match(/.(.{1,4})$/)[1]);
});

// Select all images with PNG or JPG extensions:
$('img:regex(data:extension, png|jpg)');

Have fun!

Comments are closed for this post.

Back to top

I don't understand.
What is the large code snippet at the top? Do I put that into my js so that these lines from the Usage will work? I tried this, and I got

SyntaxError: syntax error
method: matchParams[].match(validLabels) ?

Help appreciated. Thanks

@KevinDrew

http://james.padolsey.com/javascript/regex-selector-for-jquery/

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

You have error at this line:

regex = new RegExp(matchParams.join('').replace(/^s+|s+$/g,''), regexFlags);

Do not forget backslash before 's'