javascriptjqueryregexjquery-selectors

How to use a regular expression in a jQuery selector?


I am after documentation on using wildcard or regular expressions (not sure on the exact terminology) with a jQuery selector.

I have looked for this myself but have been unable to find information on the syntax and how to use it. Does anyone know where the documentation for the syntax is?

EDIT: The attribute filters allow you to select based on patterns of an attribute value.


Solution

  • James Padolsey created a wonderful filter that allows regex to be used for selection.

    Say you have the following div:

    <div class="asdf">
    

    Padolsey's :regex filter can select it like so:

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

    Also, check the official documentation on selectors.

    UPDATE: : syntax Deprecation JQuery 3.0

    Since jQuery.expr[':'] used in Padolsey's implementation is already deprecated and will render a syntax error in the latest version of jQuery, here is his code adapted to jQuery 3+ syntax:

    jQuery.expr.pseudos.regex = jQuery.expr.createPseudo(function (expression) {
        return function (elem) {
            var matchParams = expression.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));
        }
    });