javascript - Check if link (not URL) contain some text (.jpg, .gif, .png) - Stack Overflow

admin管理员组

文章数量:1026989

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.

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.

• javascript
• jquery

Share Improve this question Follow asked Jun 5, 2014 at 17:36 Someone33Someone33 56822 gold badges88 silver badges2626 bronze badges 1

• How about something like stackoverflow./questions/3042312/…? – ChrisW Commented Jun 5, 2014 at 17:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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/9Q5yu/1/

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./image2.png?postValue=1234

Given the clarification in the ments, 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/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
  • String.prototype.split().
• jQuery:
  • filter()

var productImages = "https://image.spreadshirtmedia./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")
    }

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.

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.

• javascript
• jquery

Share Improve this question Follow asked Jun 5, 2014 at 17:36 Someone33Someone33 56822 gold badges88 silver badges2626 bronze badges 1

• How about something like stackoverflow./questions/3042312/…? – ChrisW Commented Jun 5, 2014 at 17:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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/9Q5yu/1/

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./image2.png?postValue=1234

Given the clarification in the ments, 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/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
  • String.prototype.split().
• jQuery:
  • filter()

var productImages = "https://image.spreadshirtmedia./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")
    }

本文标签： javascriptCheck if link (not URL) contain some text (jpgGIFpng)Stack Overflow