JS/Jquery, Match not finding the PNG = match('/gif|jpg|jpeg|png/')

Question

I have the following code which I use to match fancybox possible elements:

$('a.grouped_elements').each(function(){
    var elem = $(this);
    // Convert everything to lower case to match smart
    if(elem.attr('href').toLowerCase().match('/gif|jpg|jpeg|png/') != null) {
        elem.fancybox();
    }
});

It works great with JPGs but it isn't matching PNGs for some reason. Anyone see a bug with the code? Thanks

Answer 1

A couple of things.

Match accepts an object of RegExp, not a string. It may work in some browsers, but is definitely not standard.

"gif".match('/gif|png|jpg/'); // null​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Without the strings

"gif".match(/gif|png|jpg/); // ["gif"]

Also, you would want to check these at the end of a filename, instead of anywhere in the string.

"isthisagif.nope".match(/(gif|png|jpg|jpeg)/); // ["gif", "gif"]

Only searching at the end of string with $ suffix

"isthisagif.nope".match(/(gif|png|jpg|jpeg)$/); // null

No need to make href lowercase, just do a case insensitive search /i.

Look for a dot before the image extension as an additional check.

And some tests. I don't know how you got any results back with using a string argument to .match. What browser are you on?