jQueryのセレクターでRegexを使用できるようにするプラグイン

『Regex Selector for jQuery』にて、jQueryのセレクターでRegexするプラグインを投稿されていたので、どんなもんかとそちらで書かれているサンプルを全部試してみました。

id属性が『a,e,i,o,u』で始まる要素を取得します。

$(':regex(id,^[aeiou])');

class属性に半角数字が含まれている要素を取得します。

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

src属性に"jQuery"という文字列が含まれているscriptタグ(要素)を取得します。

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

コードを見ると"i"フラグを使用しているため大文字/小文字を区別しません。
ですから『jquery』、『jQuery』共に取得します。


widthが100～399pxの要素を取得します。(原文では100 - 300pxですが...)

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

styleで指定されたものという意味ではなく、結果として要素のwidthが100～399pxの範囲にある要素を取得します。
ブラウザによって(もちろんIEですが)widthの解釈が異なるので結果も異なります。


"display"が"block"でないdiv要素を取得します。

$('div:not(:regex(css:display, ^block$))');

『:not(expr)』を併用して"display:block"ではないdiv要素を取得しています。


img要素の中で画像の拡張子が『png』または『jpg』の要素を取得します。

$('img').each(function(){
    $(this).data('extension', $(this)[0].src.match(/\.(.{1,4})$/)[1]);
});
 
$('img:regex(data:extension, png|jpg)');

img要素のdataに拡張子を格納し、それをセレクターで拾っています。


結構使えそうな感じですね。
ちなみにこれ書いたのイギリスの18歳の方です。