35

How can I insert a string before the extension in an image filename? For example, I need to convert this:

../Course/Assess/Responsive_Course_1_1.png

to this:

../Course/Assess/Responsive_Course_1_1_large.png

9 Answers 9

46

If we assume that an extension is any series of letters, numbers, underscore or dash after the last dot in the file name, then:

filename = filename.replace(/(\.[\w\d_-]+)$/i, '_large$1');
2
  • 2
    doesn't work if filename has no extension, check my answer below for a solution that works in all cases
    – Maria
    Commented Jul 24, 2017 at 23:47
  • Won't work if a filename doesn't have an extension but a folder does. Any solution that doesn't involve path.extname is wrong.
    – Nowaker
    Commented Feb 14, 2022 at 19:46
31

None of the answers works if file doesn't have extension. Here's a solution that works for all cases.

function appendToFilename(filename, string){
    var dotIndex = filename.lastIndexOf(".");
    if (dotIndex == -1) return filename + string;
    else return filename.substring(0, dotIndex) + string + filename.substring(dotIndex);
} 
3
  • 3
    Isn't the question is about appending prior to extension? If there is no file extension concate string with filename. Life is simple no?
    – Kamran
    Commented Jun 15, 2019 at 7:51
  • For appendToFilename("filename.tar.gz", "-copy"), this would result in filename.tar-copy.gz.
    – OJ7
    Commented Feb 3, 2020 at 19:50
  • 3
    @Kamran No, life is not simple. As a developer once said: Making the program do what it must do is easy. The hard part is to make it not do what it must not do. Commented Jun 28, 2021 at 6:51
23

Use javascript lastIndexOf, something like:

var s = "Courses/Assess/Responsive_Cousre_1_1.png";
var new_string = s.substring(0, s.lastIndexOf(".")) + "_large" + s.substring(s.lastIndexOf("."));
4
  • 3
    This method is faster than the regex based one (not surprising). For 100000000 elements: Regex: 41s lastIndexOf: 15s
    – Antoine
    Commented Oct 17, 2014 at 21:39
  • @AntoineBolvy Thanks for adding this information. I am curious how you tested this? Commented Aug 25, 2017 at 1:11
  • I'll be honest it's been three years, and I don't remember. Just a basic loop I guess.
    – Antoine
    Commented Aug 28, 2017 at 12:49
  • Won't work if a filename doesn't have an extension but a folder does. Any solution that doesn't involve path.extname is wrong.
    – Nowaker
    Commented Feb 14, 2022 at 19:45
5
var s = '../Course/Assess/Responsive_Course_1_1.png'
s.replace(/\.png$/, '_large.png');

This will do the job. By the way, it's night here. :)

UPDATE:

A more general way would be this:

var s = '../Course/Assess/Responsive_Course_1_1.png';
s.replace(/(\.[^\.]+)$/, '_large$1');
1
  • 2
    but that's what he asked for. Now, if I were you, I would've told this: yes, he asked for only png. But he didn't say he didn't want a general solution!. Fine, I'll update it. :) Commented May 29, 2012 at 15:42
1

Either $1 match a filename with no extension or $2 match an extension.

filename = filename.replace(/^([^.]+)$|(\.[^.]+)$/i, '$1' + "_large" + '$2');
1

for files without extension and files includes extension. thanks @paul !

filename = filename.replace(/^([^.]+)$|(\.[^.]+)$/i, '$1' + "-thumb" + '$2');

1

Simple regex replace

filename = filename.replace(/(\.[^.]+)$/i, '_large$1')

0

If you are not sure what could be the incoming file's extension then this helps:

function renameFileA(imgUrl) {
  var extension = `.${imgUrl.split('.').pop()}`
  var [fileName] = imgUrl.split(extension);
  return `${fileName}_large${extension}`;
};

// this is clean but I don't understand what's going on till I do research ;)
function renameFileB(imgUrl) {
  return imgUrl.replace(/(\.[\w\d_-]+)$/i, '_large$1');
};

var valA = renameFileA('http//www.app.com/img/thumbnails/vid-th.png');
var valB = renameFileB('http//www.app.com/img/thumbnails/vid-th.jpg');

console.log('valA', valA);
console.log('valB', valB);

0

Just in case: Flexible to change pattern like prefix or suffix

const url = 'https://example.com/path/filename.png?a&b=c'
const regex = /((?:.+\/.+)+\/)(.?.+)+\.(.+)/

const result1 = url.replace(regex,'$1prefix_$2.$3')
const result2 = url.replace(regex,'$1$2_suffix.$3')
const result3 = '../Course/Assess/Responsive_Course_1_1.png'.replace(regex,'$1$2_large.$3')
const result4 = '../path/file'.replace(/(\/)(.?.+)/,'$1$2_suffix')

console.log(result1) // https://example.com/path/prefix_filename.png?a&b=c
console.log(result2) // https://example.com/path/filename_suffix.png?a&b=c
console.log(result3) // ../Course/Assess/Responsive_Course_1_1_large.png
console.log(result4) // ../path/file_suffix

Credit: Regex from: https://stackoverflow.com/a/60538390/622813

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.