Shopify Question posted in
The Shopify help center can be found here.

How can I insert text before the file extension with JavaScript? – Shopify

I have image URLs like this

https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7.jpg?v=1579953393

I need to insert _small before the file extension in order to get that image size and it should look like this

https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7_small.jpg?v=1579953393

(Images can have different file extensions.)

What’s the best way to do this with JavaScript? Maybe Regex?

Tried using this Regex, but it doesn’t work with the ?v=1579953393 after the file extension.

Tags:

6

Answers


  1. Chosen as BEST ANSWER
    0

    I did manage to rework this answer to do the job. It looks like this and it works as expected.

    image = 'https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7.jpg?v=1579953393';
image = image.replace(/(.[wd?=_-]+)$/i, '_small$1');

  2. 0

    One approach can be this, where you are sure that image extension is .jpg.
    Then you can split the string. 

    let str = 'https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7.jpg?v=1579953393';

let strArr = str.split('.jpg');

console.log(strArr[0]);

let newStr = `${strArr[0]}_small`;

console.log(newStr);

let url = `${newStr}.jpg${strArr[1]}`;

console.log(url);

    Evening using URL interface you can achieve this.

    Login or Signup to reply.
  3. 0

    This should help you. You just need to add each extension type that could be used to the fileTypes array.

    const url = "https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7.jpg?v=1579953393";

const fileTypes = ['.jpg','.png']; //add each extension that you will use here.

const urlType = fileTypes.filter(type => url.search(type)> 0)[0];

let newUrl = urlType ? url.replace(urlType,`_small${urlType}`) : null;

console.log(newUrl)
    Login or Signup to reply.
  4. 0 
    let str = "https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7.jpg?v=1579953393";
let[filename, extension] = str.split('.jpg');

let rename = filename+'_small.'+extension;

console.log('New file name',rename);

    Hope , it will help you.

    Login or Signup to reply.
  5. 0

    You can use this Regex:

    ((?:.+/.+)+/)(.?.+)+.(.+)?(.*)

    var url = 'https://cdn.shopify.com/s/files/1/0919/5078/products/DSC_9782-processed_9bef16cb-7700-48d9-ad6d-f9a350e7f6c7.jpg?v=1579953393';
url = url.replace(/((?:.+/.+)+/)(.?.+)+.(.+)?(.*)/,"$1$2_small.$3?$4");
alert(url);
    ((?:.+/.+)+/) : matches text from starting to last slash (/) - protocol,host, and folders 
(.?.+)+         : filename 
.              : Specific char . - before file extension
(.+)            : file extension
?              : special character ? - starting of search params
(.*)            : search params

    Then replace groups like:

    $1$2_small.$3?$4
    Login or Signup to reply.
  6. 0

    My solutions aren’t always the shortest or the most elegant, however, I think they are their weight in readability.

    I didn’t like the extensibility or readability of the solutions above so I wrote this function:

    append_to_file_name (file_name, str_to_append) {

    if (file_name && file_name.indexOf('.') >= 0) {

        let file_qs;
        let file_ext;
        let file_name_array = [];
        let file_q_index = file_name.indexOf('?');

        if (file_q_index >= 0) {

            file_qs = file_name.substring(file_q_index);
            file_name = file_name.substring(0, file_q_index);

        }

        file_name_array = file_name.split('.');
        file_ext = file_name_array.pop();

        file_name = (`${ file_name_array.join() }${ str_to_append }.${ file_ext }${ file_qs }`);

    }

    return file_name;

},
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search