RegEx Selector для jQuery

Автор оригинала: James Padolsey
  • Перевод
Всем давно известно, что jQuery легко расширяем. Сегодня мы добавим новый селектор — :regex.



Расширяем jQuery



Добавляем приведенный ниже код на те страницы, на которых хотим использовать :regex-селектор.

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



// Выберет все DIVы с классами, содержащими числа:

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


// Выберет все SCRIPT тэги с параметром SRC содержащую строку jQuery:

$('script:regex(src,jQuery)');


// Выберет все элементы с параметром width между 100 и 300:

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


Внимание! Вместо одиночного backslash'a, нужно использовать двойной backslash, например \\d, \\S, \\/, \\.
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 10

    +13
    // Выберет все элементы с параметром width между 100 и 300:
    Наверное, должно быть от 100 до 399?
      0
      А этот James Padolsey, собирается пулить это в jQuery? Мне кажется, что если это доработать, то может получится даже что-то дельное.
        +11
        Ни в коем случае это нельзя пулить в сам jQuery. А то потом начнут пользоваться еще…
        +3
        jQuery поддерживает xPath, разве нельзя тоже самое сделать при помощи него?
          +6
          Как-то не особенно хорошо пояснена необходимость этого.

          // Выберет все DIVы с классами, содержащими числа:
          $('div:regex(class,[0-9])');

          Странная необходимость.

          // Выберет все SCRIPT тэги с параметром SRC содержащую строку jQuery:
          $('script:regex(src,jQuery)');

          Это вообще есть в CSS, нечего городить своё:
          $('script[src*="jQuery"]');

          // Выберет все элементы с параметром width между 100 и 300:
          $(':regex(css:width, ^[1-3]\\d{2}px$)');

          Опять странное применение.

          В любом случае, гораздо очевиднее, на мой взгляд, использовать .filter().
            –4
            Может быть вы и правы. Я приминил :regex так:

            $("img:regex(src,image/cache.*\\d+x\\d+)")
            


            В любом случае это дополнение лишнем не будет.
            +4
            3 года статье
              –3
              На главной, статьи про игру Half-Life которой 15 лет и никто не жалуется.
                +2
                Вы что с чем сравнивайте, имейте совесть!
              +1
              Здесь более любопытна сама возможность расширять селекторы, чем конкретный пример. Я об этом не знал, по крайней мере. Конечно, было бы лучше, если б к коду были приведены какие-то пояснения, а не в стиле «вставляем этот магический сниппет и наслаждаемся». Нет, например, примера на метку «data:», хотя сниппет её поддерживает. Понятно, что это перевод, но было бы круто, если б автор вместо перевода расширил заметку и написал свою статью по мотивам.

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое