In this article, I will show you some simple methods to get the filename without the path using JavaScript. Let’s read it now to get more knowledge.
Get the filename without the path using JavaScript
Using substring() and lastIndexOf() method
Substring()
method: will extract the content of a string. Substring()
will specify the extracted content with two parameters: start and end. The method will return the content extracted from the original string.
The extracted content will be the string that extends from start to end and does not include the end element.
Syntax
substring(indexStart, indexEnd)
Parameters
- indexStart: is the starting position to extract (required).
- indexEnd: is the end position. The extraction will not include the end element (optional).
LastIndexOf() method: Returns the position of the last occurrence of a value found in the string, or -1
if not found.
Syntax:
lastIndexOf(searchString, start)
Parameters:
- searchString: a character or string of characters for which you want to find its last occurrence in the original string.
- start: it specifies the starting position of the reverse search (optional).
The idea is that we use lastIndexOf()
to get the index of the first filename’s character, which is next to the ‘/’ last. Then we use substring()
to return that part of the path between the start index of the filenames’ character and the end of the path.
Code sample:
let path = "xampp/htdocs/img/LearnShareIT.png"; let fName = path.substring(path.lastIndexOf('/') + 1); console.log(fName);
Output:
Notice that we need to add the index by 1
because we don’t take '/'
.
Using substr(), slice() and lastIndexOf() method
substr() method
Syntax:
substr(start, length)
Parameters:
- start: is the start position
- length: is the length of the substring to be taken from the starting position.
If the length is 0, it will return 1 empty depth.
If the length is negative, it will be calculated as 0.
If the length is missing, it’s like substring() without indexEnd parameters.
slice() method
Syntax:
slice(start, stop)
Parameters:
- start: the start position
- stop: the end position
If the end value is omitted, it is the same as the substring()
function.
If start > stop, slice()
it will not exchange 2 arguments (Returns the empty string).
If the start is negative, slice() will count from the end of the string, just like substr()
. In the case of counting from the end of the string, but the start position still exceeds the end position in the string, it will be the same as the case start > stop.
So the method here is the same as using the substring above.
Code sample:
let path = "xampp/htdocs/img/LearnShareIT.png"; let fName = path.substr(path.lastIndexOf('/') + 1); console.log(fName); let file = "xampp/htdocs/img/LearnShareIT.jpg"; let fileName = file.slice(file.lastIndexOf('/') + 1); console.log(fileName);
Output:
Using split()
and pop()
method
split() method
Syntax:
split(separator, limit)
Parameters:
- separator: Specifies the character to use to split the string. If the separator is omitted, the returned array contains an element containing the whole string.
- limit: Integers specify a limit on the number of divisions.
pop() method
: delete the last element of an array
Syntax:
string.pop()
Returns deleted element.
The idea is to split the elements separated by '/'
and then delete and return the last element filename.
Code sample:
let path = "xampp/htdocs/img/LearnShareIT.png"; let fName = path.split('/').pop(); console.log(fName);
Output:
Summary
Above, I showed you how to get the filename without the path using JavaScript using many simple methods. I hope they are helpful to you. To better understand the lesson’s content, practice rewriting today’s examples. And let’s learn more about JavaScript in the next lessons here. Thank you for reading.
Maybe you are interested:
- Import a JavaScript file into a TypeScript file
- Import Functions from another file using JavaScript
- Export all functions from a file in JavaScript
- How to import a JSON file in JavaScript (ES6 Modules)
- Get the Status Code of an Axios HTTP Error in JavaScript

Hi, my name is Joni Smith. My job is a programmer. I love learning programming languages, especially C++, C#, php, javascript, html, css. I want to share them with you. I hope my articles will bring a lot of useful knowledge to you.
Name of the university: HVNH BA
Major: htttql MIS
Programming Languages: C++, C#, php, javascript, html, css