Get filename from URL using Javascript

This snippet will get the filename from the url. The filename is the last part of the URL from the last trailing slash. For example, if the URL is http://www.example.com/dir/file.html then
file.html is the file name.

Explanation

  1. var url = window.location.pathname;

This declares the url variable and adds the current pathname as its value.

  1. var filename = url.substring(url.lastIndexOf('/')+1);
  2. alert(filename);

substring (method) - extract characters from start (parameter).
url is the stringObject url.substring(start)

lastIndexOf (method) - position of last occurrence of specified string value, in this case the '/'

Add one to lastIndexOf because we do not want to return the '/'

Full snippet

  1. var url = window.location.pathname;
  2. var filename = url.substring(url.lastIndexOf('/')+1);
  3. alert(filename);

Comments

Actually, that does not define the file name.
I'm bad at explaining... so here's the javascript I use:

function getFileName() {
//this gets the full url
var url = document.location.href;
//this removes the anchor at the end, if there is one
url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));
//this removes the query after the file name, if there is one
url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));
//this removes everything before the last slash in the path
url = url.substring(url.lastIndexOf("/") + 1, url.length);
//return
return url;
}

DEO, Just what I was looking for thank you.

Nice function! It deals with all situation! Thanks!

Thanks, this was just what I needed

Thanks!! :)

thanx man

Thank you it helped me to solve a issue

thanks

Thanks.... nice info

thanks

Note that this returns an empty string if the filename part of the URL is empty, eg "http://www.google.co.uk/".

Blair Wadman's picture

Good point, thanks for pointing that out.

this dont work.. if you go to a route that doesnt have the filename in the url then returns empty...

Blair Wadman's picture

This snippet only returns a filename if there is one, so I'd expect that. A meaningful message could be added if there is no filename. I'll look into updating the snippet soon.

thnx...it works..:)

Thnx... :)

it work thankz

thanks for such a nice help
can u tell me how to get just previous page or file name using javascript
thank u

You can use the native string split function to create an array of the URL pieces, the take the last item use the negative slice to grab from last to first in the array. Separating by forward slash accomplishes this.

See below:

var fName = location.pathname.split('/').slice(-1)[0];
alert(fName);

Simple one liner.

Here is an improved version of the function, well at least it is improved for me. I added three lines near the bottom which just check if the function found a page name or not.. Otherwise it assumes the page name is "index".

function GetFileName(){
//this gets the full url
var url = document.location.href;
//this removes the anchor at the end, if there is one
url = url.substring(0, (url.indexOf("#") == -1) ? url.length : url.indexOf("#"));
//this removes the query after the file name, if there is one
url = url.substring(0, (url.indexOf("?") == -1) ? url.length : url.indexOf("?"));
//this removes everything before the last slash in the path
url = url.substring(url.lastIndexOf("/") + 1, url.length);
//return
if(url.length == 0){
url = "index";
}
alert(url);
return url;
}

Thanks its works !!!!!!!

var url=window.location.pathname;
var filename = url.replace(/^.*[\\\/]/, '');
alert(filename);

credit to this site and http://stackoverflow.com/a/423385

how to get the all folder name in the form of button by using path in javascript...

Your code works beautifully.

Hi

your code works fine, but I have Problems with German Umlaute.

Example: Filename "BÄR.html"

This will give the result: "B%C3%84R.html"

Using "unescape" gives me: BÄR.html (look exactly, the signs above A are different ..)

The files are used local on a Windows PC, they are not used as web-files.
What can I do?

Win 7x64, German, Firefox 20 (Internet Explorer returns nothing, maybe Javascript is disabled)

Peter

Hi

now I created this code with "replace". It seem to work, but is there a better way?

script type="text/javascript"
var url=window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
var filename2 = filename.replace(/%C3%84/g, "Ä");
var filename2 = filename2.replace(/%C3%96/g, "Ö");
var filename2 = filename2.replace(/%C3%9C/g, "Ü");
var filename2 = filename2.replace(/%C3%A4/g, "ä");
var filename2 = filename2.replace(/%C3%B6/g, "ö");
var filename2 = filename2.replace(/%C3%BC/g, "ü");
/script

GD improvement I will do it like that personally:
I will do it like this:
function GetFileName(){
var url=window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
if(filename == "" || filename == "undefined" ){
filename = "index.php";//You could change the extention
}else{
//Code to replace %C3%84 and others...(You know what to do)
}
return filename;
}

Thank you very much. This snippet helped me to finish one of my scripts. Finally!

Thanks a lot this is great it will make my day......

Add new comment