Last updated: Mar 6, 2024
Reading timeยท3 min
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.
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'));
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:
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).
.
matches any 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.
If you ever need help reading a regular expression, bookmark this regex cheat sheet from MDN. It's by far the best one out there.
This would work for both Windows (backslashes) and Unix (forward slashes) paths.
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.
The substring
method will return a new string containing only the characters
after the last slash.
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 then added
1
to the result because we want to exclude the last slash from the result.
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.
-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:
path
module.path.basename()
method.import path from 'path'; // ๐๏ธ if you use CommonJS syntax // 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.
You can learn more about the related topics by checking out the following tutorials: