How do I change file extension with javascript

Question

Does anyone know an easy way to change a file extension in Javascript?

For example, I have a variable with "first.docx" but I need to change it to "first.html".

Alex K. · Accepted Answer · 2020-11-27T17:15:28.373

84

This will change the string containing the file name;

let file = "first.docx";

file = file.substr(0, file.lastIndexOf(".")) + ".htm";

For situations where there may not be an extension:

let pos = file.lastIndexOf(".");
file = file.substr(0, pos < 0 ? file.length : pos) + ".htm";

edited Nov 27 '20 at 17:15

answered May 10 '11 at 16:38

Alex K.

165,803
30
257
277

7

Note that there's an edge case if you use this on a filename that doesn't already have an extension. – hippietrail Feb 28 '16 at 00:16
how would i achieve setting the file format if i'm downloading from a website that doesn't provide a typical file?? it's just a url. i.e. **https://r5---sn-uxa0n-t8gs.googlevideo.com/videoplayback?ipbits=0&initcwndb…D134213BA9465CB74DFD36CDE47BF.102638C4A9F3ACA357F79EE747DD5F49F1E0F0DE** – oldboy Jul 26 '17 at 02:59
1

This code is for getting an existing extension from a known file name, if you don't have a file name your problem is different. Submit a new question perhaps. – Alex K. Jul 26 '17 at 09:23
This fails for paths like `foo.bar/qux`, i.e. no extension but dot in parent dir name. See [my answer](https://stackoverflow.com/a/57371333/3425536) for a solution that also handles these cases. – emlai Aug 06 '19 at 07:54

emlai · Answer 2 · 2021-02-08T11:23:42.027

25

In Node.js:

// extension should include the dot, for example '.html'
function changeExtension(file, extension) {
  const basename = path.basename(file, path.extname(file))
  return path.join(path.dirname(file), basename + extension)
}

Unlike the accepted answer, this works for edge cases such as if the file doesn't have an extension and one of the parent directories has a dot in their name.

edited Feb 08 '21 at 11:23

answered Aug 06 '19 at 07:52

emlai

39,703
9
98
145

score 15 · Answer 3 · edited Nov 18 '19 at 09:15

15

file = file.replace(/\.[^.]+$/, '.html');

edited Nov 18 '19 at 09:15

Илья Зеленько

6,506
2
38
52

answered May 10 '11 at 16:34

ChaosPandion

75,687
16
116
154

The problem is: I don't know which extention the input file has – Joseandro Luiz May 10 '11 at 16:35
1

What if the file's name were "file.name.docx" ? – Joseandro Luiz May 10 '11 at 16:38
@Juan - Your comment would be more appropriate on @Alex K's answer. – ChaosPandion May 10 '11 at 16:40
2

@ChaosPandion: why? can you point me to a link that says I should not comment on an answer saying that another is better? I'll stop doing so if this is a general rule here. – Juan Mendes May 10 '11 at 16:44
1

Regex for something this simple is the Golden Hammer AntiPattern (http://sourcemaking.com/antipatterns/golden-hammer) – Visionary Software Solutions Aug 17 '11 at 12:42
1

@JuanMendes other than the unneeded escapes on the dots, `/.[^.]+$/` this is a fine solution to the question. Not sure why there is so much protest? – Eat at Joes Jun 19 '19 at 19:15

mizkichan · Answer 4 · 2022-01-04T02:50:25.243

15

I'd use this:

path.format({ ...path.parse('/path/to/file.txt'), base: '', ext: '.md' })

to change "/path/to/file.txt" to "/path/to/file.md".

edited Jan 04 '22 at 02:50

answered Feb 09 '20 at 17:29

mizkichan

329
2
11

7

^^ that should be marked as the right answer as it lets the framework worry about edge cases. – Merkle Groot Aug 07 '21 at 00:11

Merc · Answer 5 · 2020-09-21T23:22:12.020

This probably won't get many upvotes but I couldn't resist.

This code will deal with the edge case where a file might not have an extension already (in which case it will add it). It uses the "tilde trick"

function changeExt (fileName, newExt) {
  var _tmp
  return fileName.substr(0, ~(_tmp = fileName.lastIndexOf('.')) ? _tmp : fileName.length) + '.' + newExt
}

EDITED: thanks @kylemit for a much better gist which uses the same logic, but in a much much neater way:

function changeExt(fileName, newExt) {
  var pos = fileName.includes(".") ? fileName.lastIndexOf(".") : fileName.length
  var fileRoot = fileName.substr(0, pos)
  var output = `${fileRoot}.${newExt}`
  return output
}

console.log(changeExt("img.jpeg", "jpg"))             // img.jpg
console.log(changeExt("img.name.jpeg", "jpg"))        // img.name.jpg
console.log(changeExt("host", "csv"))                 // host.csv
console.log(changeExt(".graphqlrc", "graphqlconfig")) // .graphqlconfig

Hey Merc, dredging up this answer from 3 years ago. It's clever, but a doozy of a one-liner. Might I humbly suggest replacing this [ES6 version in gist](https://gist.github.com/KyleMit/be4790e984410326ea6d9351fd13f1ee) which handles the same edge cases, but with a little more clarity — KyleMit, Sep 20 '20 at 13:47

score 2 · Answer 6 · answered Oct 14 '21 at 17:07

2

path.parse("first.docx").name + ".html"

answered Oct 14 '21 at 17:07

Mikki Ukraine

102
6

2

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: https://stackoverflow.com/help/how-to-answer . Good luck – nima Oct 14 '21 at 21:28

score 0 · Answer 7 · edited Jan 04 '12 at 01:27

0

var file = "first.docx";
file = file.split(".");
file = file[0]+".html";

edited Jan 04 '12 at 01:27

一二三

20,716
11
61
73

answered May 10 '11 at 16:32

Maxime

3,157
7
25
33

This seems to be a rather complex way of solving the problem. – ChaosPandion May 10 '11 at 16:34
7

It's not complex, split is very easy to understand, it may do more work than you need though. However this solution doesn't account for periods in the file name – Juan Mendes May 10 '11 at 16:41

How do I change file extension with javascript

7 Answers7

Linked