Check if link (not URL) contain some text (.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.

How about something like http://stackoverflow.com/questions/3042312/jquery-find-file-extension-from-string? — ChrisW, Jun 05 '14 at 17:39

score 8 · Accepted Answer · answered Jun 05 '14 at 17:48

8

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/

answered Jun 05 '14 at 17:48

blert

396
1
2

Your code works fine on a blank, new page. But for some reason, i get the console.log message also on .zip and .pdf extensions. Is there a possibility that javascript is executed before the php page is generated? Hope i'm clear enough :-) In the console.log i see only the image extensions, but on real example (adding a class to the link) the class is applied also to text string with .zip, .pdf, ecc. extension – Someone33 Jun 05 '14 at 18:00
Sorry, i made an typo error in my code. Your code works fine. Thanks a lot for helping!! – Someone33 Jun 05 '14 at 18:05
If you suspect your Javascript is being run before all the HTML is loaded, try wrapping your JS in `$(document).ready(function () { /* your code here */ }); The JSfiddle link I posted shows all of the links in the output panel because that panel is showing the rendering of the HTML panel. Hope I'm not misunderstanding you. It worked fine for me :X, but let me know! – blert Jun 05 '14 at 18:07

David Thomas · Answer 2 · 2014-06-05T17:56:18.690

3

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()

edited Jun 05 '14 at 17:56

answered Jun 05 '14 at 17:40

David Thomas

249,100
51
377
410

1

I don't want to check the extensions inside an url, but in the content of the link, like `thisIsAnotherImage.PNG`. In my case the Url isn't important because it will be obfuscated by php. – Someone33 Jun 05 '14 at 17:46
Will it always be in that format, will the file-type *always* be at the end of the text string? – David Thomas Jun 05 '14 at 17:48
_// but please don't use 'alert()', it's a horrible UI:_----> hahaha...ok :-)) – Someone33 Jun 05 '14 at 17:48
Yes, the extension is always at the end of the text string. – Someone33 Jun 05 '14 at 17:50
Resolved my problem. Just for interest and learning: what means `'gi'` in your code? Can you explain it please? Thanks in advance! – Someone33 Jun 05 '14 at 18:11

score 0 · Answer 3 · answered Apr 21 '23 at 09:23

var productImages = "https://image.spreadshirtmedia.com/image-server/v1/mp/products/T210A2PA4301PT17X41Y37D1030409081W24999H24999/views/1,width=500,height=500,appearanceId=706,backgroundColor=F2F2F2.jpg";

var pngWordCheckExits = productImages.includes('png');
var jpgWordCheckExits = productImages.includes('jpg');
    //if(pngWordCheckExits === true  || jpgWordCheckExits === true){
      if (pngWordCheckExits || jpgWordCheckExits) {
        await repository.processProductImageBoth(productImages,campaignNumber, productSKU, productID, printSide, campaignAndProductSKU);
    }else{
        console.log("not found jpg & png on string")
    }

Check if link (not URL) contain some text (.jpg, .gif, .png)

3 Answers3