Remove file extension from a string using JavaScript

avatar

Borislav Hadzhiev

Sat Mar 26 20223 min read

banner

Photo by Clay Banks

Remove file extension from a string using JavaScript #

Use the substring() method to remove a file extension from a string, e.g. filename.substring(0, filename.lastIndexOf('.')) || filename. The substring method will return a new string that consists of the file name without the extension.

index.js
function removeExtension(filename) { return filename.substring(0, filename.lastIndexOf('.')) || filename; } // 👇️ myFile console.log(removeExtension('myFile.jpeg')); // 👇️ myFile console.log(removeExtension('myFile')); // 👇️ /my-folder/myFile console.log(removeExtension('/my-folder/myFile.jpeg'));

The two parameters we passed to the String.substring method are:

  1. the start index - the index of the first character to be included in the returned string
  2. the end index - go up to, but not including this index

We start at index 0 and go up to, but not including the index of the last dot in the string.

The substring method does not mutate the original string, so you have to save the result in a variable. Strings are immutable in JavaScript.

The String.lastIndexOf method returns the index of the last occurrence of the specified substring in the string.

If the specified substring (the dot character) is not contained in the string, then lastIndexOf will return -1.

If the lastIndexOf method returns -1, our call to the substring method will return an empty string. This is why we used the logical OR (||) operator to return the passed in string if the function is called with a filename without an extension.

Note that if you write your code in Node.js, you can use the build in path module.

To remove a file extension from a string in Node.js:

  1. Import the path module.
  2. Pass the string to the path.parse() method.
  3. Access the name property on the returned object.
  4. The name property contains the filename without the extension.
index.js
const path = require('path'); console.log(path.parse('myFile.jpeg').name); // 👉️ "myFile" console.log(path.parse('myFile.jpeg').ext); // 👉️ ".jpeg" console.log(path.parse('myFile').name); // 👉️ "myFile" console.log(path.parse('myFile').ext); // 👉️ "" // 👇️ "myFile" console.log(path.parse('/my-folder/myFile.jpeg').name); // 👇️ ".jpeg" console.log(path.parse('myFolder/myFile.jpeg').ext);

The pat.parse() function takes a string as a parameter and returns an object.

You can access the name property on the object to get the filename without the extension.

Alternatively, you can use a regular expression.

To remove the file extension from a string, call the replace() method passing it the following regular expression: /\.[^\/.]+$/ as the first parameter and an empty string as the second. The method will return a new string consisting only of the filename.

index.js
function removeExtension(filename) { return filename.replace(/\.[^\/.]+$/, ''); } // 👇️ myFile console.log(removeExtension('myFile.jpeg')); // 👇️ myFile console.log(removeExtension('myFile')); // 👇️ /my-folder/myFile console.log(removeExtension('/my-folder/myFile.jpeg'));

The forward slashes / / mark the beginning and end of the regular expression.

The \. characters match the dot . character. We had to escape it because it has special meaning in regular expressions.

The square brackets [] are called a character class.

When used inside of the square brackets [], a caret ^ symbol means "not the following". It's basically a negated match.

So we match any character that is not a forward slash and a dot in our character class.

The plus + matches the preceding item 1 or more times and the dollar sign $ matches the end of the input.

In its entirety, the regular expression matches a dot and any character that is not a dot or forward slash at the end of a string.

If you ever need help reading a regular expression, bookmark this regex cheatsheet from MDN. It's by far the best one out there.

The second parameter we passed to the replace method is the replacement for the match - in our case an empty string because we want to remove the file extension.

Which approach you pick is a matter of personal preference. I'd go with using the substring method, because it's easy to read, it's quite intuitive and can be used in the browser and Node.js.

Use the search field on my Home Page to filter through my more than 1,000 articles.