How to shorten multiple if conditions in jQuery?

Question

I've been putting images to my element img src . I have 4 file types to check, .png, .jpg, .jpeg, .gif . What I want to achieve is whenever a filetype isn't available in the server, go and check other filetypes and replace the value of the <img src=""> .

for example, if .png file isn't available in the server, check if .jpeg is available, if still not, check .jpg , and so on.

and if .jpg isn't available on the server, check .jpeg if available, if not, check .png and so on.

My current code only contains 2 conditions, and I'm thinking about how can I shorten my if-else if I were to put the other file types.

$('img').one('error', function() {
                if(this.src.includes(".png")){
                    this.src = this.src.replace(".png", ".jpeg")
                }else if(this.src.includes(".jpg")){
                    this.src = this.src.replace(".jpg", ".png")
                }
             });

I'm able to use lodash but I don't want to install another third-party package. I'm still considering a switch case statement but if an if-else statement will do and rather go with it. Thanks!

Answer 1

Well you can loop over the extensions and test one by one on each function call according to the current extension, here is the code

// define the supported extensions so you can add, delete and modifie
let supportedExtensions = ["png", "jpeg", "jpg", "gif"];

$('img').one('error', function() {
  // loop over the supported extensions
  for(let extension of supportedExtensions) {
    // if the current extension is the extension of the image
    // then get the next extension in the array but if the current
    // extension is the last one then get to the first one, finally break the loop
    if(this.src.includes("." + extension)) {
      let index = supportedExtensions.indexOf(extension) + 1;
      index === supportedExtensions.length && (index = 0);
      this.src = this.src.replace("." + extension, "." + supportedExtensions[index]);
      break;
    }
  }
});

Here is a live example, an image of a snowman drawing, the available extension is .png but in the HTML code the image has .jpeg as extension (for demonstration), but the program finds the correct one and logs the tries, note that in order to try multiple times you need to listen with .on instead of .one since you are not sure that the available extension is just the next one in the array!

 // define the supported extensions so you can add, delete and modifie let supportedExtensions = ["png", "jpeg", "jpg", "gif"]; $('img').on('error', function() { // loop over the supported extensions for(let extension of supportedExtensions) { // if the current extension is the extension of the image // then get the next extension in the array but if the current // extension is the last one then get to the first one, finally break the loop if(this.src.includes("." + extension)) { console.log("Trying " + extension); let index = supportedExtensions.indexOf(extension) + 1; index === supportedExtensions.length && (index = 0); this.src = this.src.replace("." + extension, "." + supportedExtensions[index]); break; } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="https://www.drawinghowtodraw.com/stepbystepdrawinglessons/wp-content/uploads/2011/12/400x400-snowman.jpeg" width="150" height="200">

Answer 2

You can use regular expression to match the extension. Check the below code:

ext = {".png": ".jpeg", ".jpg": ".png"};

$('img').one('error', function() {
   matched = this.src.match(/\.(png|jpg)/)
   if(matched){
      matched_value = matched[0];
      this.src = this.src.replace(matched_value, ext[matched_value]);
   }
 });

Answer 3

An object can be used as a look up with a replace

 var replacements = { "png": "jpeg", "jpg": "png" }; var reImgs = new RegExp(`\\\\.(${Object.keys(replacements).join('|')})`); function cleanUp(str) { return str.replace(reImgs, function(_, match) { var replacement = replacements[match] || match; return `.${replacement}`; }); } console.log(cleanUp("/foo/bar.png")); console.log(cleanUp("/foo/bar.jpg")); console.log(cleanUp("/foo/bar.gif")); $('img').one('error', function() { var src = this.src; const updated = cleanUp(src); if (updated !== src) { console.log("trying", updated); this.src = updated; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="foo.png" />

Answer 4

Well you could have an object like structure ie

const typesArr = ['png', 'jpeg'];
const type = filename.split('.').pop();
const supportedTypeMap = {
    png: 'jpeg',
    jpg: 'png'
}
if (supportedTypeMap[type]) {
    // your replacing code.
}