How To Get The Filename Without The Path Using JavaScript

Posted on by Joni Smith
Get the filename without the path using JavaScript

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:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *