检查链接（不是URL）是否包含一些文本（.jpg，.gif，.png）

Question

Just to give an Idea what i'm trying to do here's an example code:

$(function(){
  if ($('.maybe > div > a.link:contains(".JPG, .jpg, .gif, .GIF")').length) {
    alert('hello');
});

I want to check if the content of some links are containing the dot and the letters of all image extensions, like

<div class="maybe">
 <div>
   <a class="link" href="someURL">thisIsAnImage.jpg</a>
   <a class="link" href="someURL">thisIs**NOT**AnImage.pdf</a>
 </div>
</div>
 <div class="maybe">
 <div>
   <a class="link" href="someURL">thisIs**NOT**AnImage.zip</a>
   <a class="link" href="someURL">thisIsAnotherImage.png</a>
 </div>
</div>

The div's and links are generated dynamically by php, so there's no way to know how many links and div's there will be once the page is generated.

How to write the code in a properply way?

Thanks a lot for helping me to resolve the problem.

Answer 1

Here's my first instinct:

$('.maybe .link').each(function () {
    if ($(this).text().toLowerCase().match(/\.(jpg|png|gif)/g)) {
        console.log("yay I did it");
    }
});

Use toLowerCase() on the link text so you don't have to check both lower and upper case. Then use String.match(regex) with a regex group to match all the file extensions.

Hope this helps!

Edit: here's an example in jsfiddle. Open your javascript console to see the output of the console.log statement. http://jsfiddle.net/9Q5yu/1/

Answer 2

I'd suggest:

// selects all the 'a' elements, filters that collection:
var imgLinks = $('a').filter(function(){
    // keeps *only* those element with an href that ends in one of the
    // file-types (this is naive, however, see notes):
    return ['png','gif','jpg'].indexOf(this.href.split('.').pop()) > -1;
});
// I have no idea what you were doing, trying to do, wanting to do or why,
// but please don't use 'alert()', it's a horrible UI:
if (imgLinks.length) {
    console.log('hello');
}

The above is a relatively simple, and naive, check; in that it simply splits the href on the . characters and then tests the last element from the array (returned by split() ) is equal to one of the elements of the array. This will fail for any image that has a query string, for example, such as http://example.com/image2.png?postValue=1234

Given the clarification in the comments, I'd amend the above to:

var fileTypes = ['png','gif','jpg','gif'],
    imgLinks = $('a').filter(function(){

    return (new RegExp(fileTypes.join('|') + '$', 'gi')).test($(this).text());
});

References:

• JavaScript:
  • Array.prototype.indexOf() .)
  • [ RegExp.prototype.test() ]( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
  • String.prototype.split() .
• jQuery:
  • filter()