Table of Contents
This article explains the various ways to get filename from path in JavaScript.
Get Filename From Path in JavaScript
Finding a file name from its file path is a simple task. The program needs to find the last delimiter, and get everything that occurs after it.
There are multiple ways to get filename from Path in JavaScript.
Using substring() and lastIndexOf()
To get filename from path, we can use substring() and lastIndexOf() method.
- Use
lastIndexOf()to get last index of backward slash/. - Use
substring()to get substring from last index of backward slash(/) to end of the string.
Here is the code for same:
|
1 2 3 4 5 6 7 8 |
var getFilename = function (str) { return str.substring(str.lastIndexOf('/')+1); } var fileName = getFilename("C:/users/arpit/file1.txt"); console.log("FileName:",fileName); |
Output:
Using replace() method
To get filename from path, we can use replace() with regex /^.*[\\\/]/ as first parameter and empty string as second parameter.
Here is the code for same:
|
1 2 3 4 5 6 7 8 |
var getFilename = function (str) { return str.replace(/^.*[\\\/]/,''); } var fileName = getFilename("C:/users/arpit/file1.txt"); console.log("FileName:",fileName); |
Output:
string’s replace() method takes two parameters.
- A regular expression to match in String.
- Replace a substring matched by
pattern. In this case, we are using empty string as we want to remove the String matched by pattern.
Let’s understand regular expression /^.*[\\\/]/ now:
- The forward slash at start and end mark beginning of regular expression.
- The caret
^character represents start of String. .*means any character[]represents character class and inside that, we are matching backward slash and forward slash- We need to escape forward and backward slash as it has special meaning in regular expression.
Here is diagram which will help you understand regex better.
Using split and pop() methods
To get FilePath from Path in JavaScript, you can use split() and pop() methods.
- Split the String by forward slash using String’s split() method.
- Use array’s pop() method to get last element of the array.
- Split the String again by backward slash using split method.
- Use
pop()to get last element of the array which will result in FileName.
|
1 2 3 4 5 6 7 8 |
var getFilename = function (str) { return str.split('\\').pop().split('/').pop(); } var fileName = getFilename("C:/users\\arpit/file1.txt"); console.log("FileName:",fileName); |
Output:
Get FilePath from Path in Node.js
To get FilePath from Path in Node.js, you can use in-built module Path.
- Import
pathmodule - Use
path.basename()to get FileName from Path
|
1 2 3 4 5 6 7 8 9 |
const path = require('path'); function getFilename(completePath) { return path.basename(completePath); } var fileName = getFilename("C:/users/arpit/file1.txt"); console.log("FileName:",fileName); |
Output:
Conclusion
This program provides a brief description of the various ways to get filename from path using JavaScript. As per stackoverflow thread, Using split() and pop() method is fastest of all these methods.
