Get the page file name from the address bar

Question

I was wondering if it would be possible to get the page name from the address bar using jquery or javascript. I know this can be done using PHP but don't really want to as it is only a html website.

I.e. if the address is www.mywebsite.com/hello.htm how do I get the hello.htm part out of the address.

Thanks for any help you can provide.

This is not the page TITLE, it is the filenmame. The TITLE is defined in the tage in the HTML. — Diodeus - James MacFarlane, Dec 13 '11 at 22:22
Yea that was a bit misleading for what I wanted, I've updated the question title — Boardy, Dec 13 '11 at 22:24
Do you want only the file name or the directory path plus the file name? — austincheney, Dec 13 '11 at 22:28

ShankarSangoli · Answer 1 · 2011-12-13T22:36:03.860

61

Try this

location.pathname.substring(location.pathname.lastIndexOf("/") + 1);

location.pathname gives the part(domain not included) of the page url. To get only the filename you have to extaract it using substring method.

edited Dec 13 '11 at 22:36

answered Dec 13 '11 at 22:30

ShankarSangoli

69,612
13
93
124

this is great - does exactly what I needed (fetch document name) - thanks – Luke Mar 07 '13 at 15:30
1

Thanks for your answer.. But if URL ends with `/` then result will be null. – Sariban D'Cl Apr 22 '16 at 12:44
@Sariban D'Cl If there is no document name displayed in the URL then it returns NULL simply because there is no document being shown. Developers usually simplify URLs using [Mod_Rewrite](https://stackoverflow.com/questions/4529552/how-to-simplify-the-url?noredirect=1&lq=1) on Apache – Thielicious Jun 13 '17 at 11:33

score 55 · Accepted Answer · answered Dec 13 '11 at 22:24

55

https://developer.mozilla.org/en/DOM/window.location

alert(location.pathname)

If you don't want the leading slash, you can strip it out.

location.pathname.substring(1)

answered Dec 13 '11 at 22:24

Ruan Mendes

90,375
31
153
217

Awesome! didn't know javascript had a function like this. – Jack Feb 10 '15 at 02:57
1

@Jack To be accurate, it's not JavaScript, it's a host object added by the browser. For example, it doesn't exist in node.js – Ruan Mendes Apr 13 '15 at 21:32

Hugolpz · Answer 3 · 2014-01-30T10:17:12.733

Current page: The single line sound more elegant to find the current page's file name:

location.href.split("/").slice(-1)

or

location.pathname.split("/").slice(-1)

This is cool to customize nav box's link, so the link toward the current is enlighten by a CSS class.

JS:

$('.menu a').each(function() {
    if ($(this).attr('href') == location.href.split("/").slice(-1)){ $(this).addClass('curent_page'); }
});

CSS:

a.current_page { font-size: 2em; color: red; }

score 4 · Answer 4 · answered Dec 13 '11 at 22:26

4

Try this:

var pageName = (function () {
        var a = window.location.href,
            b = a.lastIndexOf("/");
        return a.substr(b + 1);
    }());

answered Dec 13 '11 at 22:26

austincheney

1,097
7
8

What's up with the use of the self-invoking anonymous function? If you're going to wrap it up in a function, do so for repeated use. – Phrogz Dec 13 '11 at 22:31
2

Why? Is the name of the page changing asynchronously? – austincheney Dec 13 '11 at 22:33
4

The self invoking function lets you create temporary variables without affecting the global scope. – Ruan Mendes Dec 14 '11 at 01:22

Phil Klein · Answer 5 · 2011-12-14T02:52:31.003

2

The Location object is your friend:

var pageName = location.pathname.substring(1);

http://www.w3schools.com/jsref/obj_location.asp

edited Dec 14 '11 at 02:52

answered Dec 13 '11 at 22:25

Phil Klein

7,344
3
30
33

2

I think the op was looking for the page file name and not the directory path. – austincheney Dec 13 '11 at 22:27
@austincheney: I find that hard to believe... a file name includes the path information. I rarely need just a name. – Ruan Mendes Dec 20 '11 at 18:29

Thielicious · Answer 6 · 2017-06-13T11:16:13.787

1

document.URL.match(/[^\/]+$/);

Just a simple alternative.

document.URL returns the document's location.
.match() is a method that filters a string using Regular Expression.
/[^\/]+$/ fetches the rest of the string starting after the last occurring slash /.

demo

edited Jun 13 '17 at 11:16

answered Jun 12 '17 at 11:53

Thielicious

4,122
2
25
35

score 0 · Answer 7 · answered Jul 24 '19 at 16:05

I've had an issue where i needed to remove the querystring parameters (?) and/or anchor (#) tags. I did this:

var path = window.location.pathname.toLowerCase();
// find the end of path prior the Query and Anchor designations. strip off everything after the ? or #.  
//      if the ? is first, then use ?, else use the #, else use the string length.
// then replace all \ with /
// then split it into an array based on /
var pagePathAry = path.substr(0, path.indexOf("?") > -1 && path.indexOf("?") < path.indexOf("#") ? path.indexOf("?") : path.indexOf("#") > -1 ? path.indexOf("#") : path.length).replace("\\", "/").split("/");
// get the folder it's in
var subFolder = pagePathAry[pagePathAry.length - 2];
// get the page name
var pageName = pagePathAry[pagePathAry.length - 1];

Get the page file name from the address bar

7 Answers7

Linked