Get the filename without the path using JavaScript #
To get a filename without the path, call the replace()
method with the following regular expression: /^.*[\\\/]/
as the first parameter and an empty string as the second. The method will return a string that only contains the
filename.
Copied!
function getFilename(fullPath) {
return fullPath.replace(/^.*[\\\/]/, '');
}
// 👇️ myFile.png
console.log(getFilename('/my-folder/myFile.png'));
// 👇️ myFile.jpeg
console.log(getFilename('/my-folder/nested/myFile.jpeg'));
// 👇️ myFile.jpeg
console.log(getFilename('myFile.jpeg'));
For a non-regex solution scroll down to the next code snippet.
We created a reusable function that takes a full path and returns the file name.
We passed the following 2 parameters to the String.replace method:
- A regular expression that we want to match in
the string.
- The replacement for the match of the regex - in our case an empty string, because we want to remove everything up to the file name.
The forward slashes mark the beginning and end of the regular expression.
The caret ^
character matches the beginning of the input (the start of the string).
The dot .
matches and single character and the asterisk *
matches the preceding character zero or more times.
The
square brackets []
are called a character class and in the character class we match backslashes and forward slashes.
We had to escape the backslash and the forward slash with another backslash, because the backslash character has a special meaning in regular expressions.
In its entirety, the regular expression matches forward or backslashes and any character at the beginning of the string until the last forward or backslash.
If you ever need help
reading a regular expression, bookmark this regex cheatsheet from MDN. It's by far the best one out there.
This would work for both windows (backslashes) and unix (forward slashes) paths.
The replace
method does not change the original string, so you have to assign the result to a variable. Strings are immutable in
JavaScript.
Alternatively, you can use the substring
method.
Use the substring()
method to get the filename without the path, e.g. fullPath.substring(fullPath.lastIndexOf('/') + 1)
. The substring
method will return a new string containing only the characters after the last slash.
Copied!
function getFilename(fullPath) {
return fullPath.substring(fullPath.lastIndexOf('/') + 1);
}
// 👇️ myFile.png
console.log(getFilename('/my-folder/myFile.png'));
// 👇️ myFile.jpeg
console.log(getFilename('/my-folder/nested/myFile.jpeg'));
// 👇️ myFile.jpeg
console.log(getFilename('myFile.jpeg'));
The only parameter we passed to the
String.substring method is the index of the first character to be included in the returned string.
We used the String.lastIndexOf method to get the index of the last forward slash in
the string and added 1
to the result because we want to exclude the last slash from the result.
Note that this approach only handles file paths with forward slash separators. If you need to handle backslash separators, you can update the argument we passed to lastIndexOf()
. If you need to handle both, use the replace
method with the regex from the first code snippet.
The lastIndexOf
method returns the index of the last occurrence of a substring in a string.
If the substring is not contained in the string, the method will return -1
and the substring
method will return the entire string.
If your environment is Node.js, you can use the built-in path
module.
To get the filename without the path in Node.js:
- Import the
path
module. - Pass the full path string to the
path.basename()
method. - The function will extract the filename from the full path.
Copied!
const path = require('path');
function getFilename(fullPath) {
return path.basename(fullPath);
}
// 👇️ myFile.png
console.log(getFilename('/my-folder/myFile.png'));
// 👇️ myFile.jpeg
console.log(getFilename('/my-folder/nested/myFile.jpeg'));
// 👇️ myFile.jpeg
console.log(getFilename('myFile.jpeg'));
The basename
method returns the last portion of a path.
It takes the fully qualified path as a parameter, extracts and returns the filename.
Which approach you pick is a matter of personal preference. If I only need to handle forward or backslash separators in the path, I'd go with the substring
method because it's easy to read and can be used in both Node.js and the browser.