80

I have an html page and I would like inside the html page to retrieve the name of the html document via Javascript. Is that possible?

e.g. name of html document = "indexOLD.html"

peterh
  • 11,875
  • 18
  • 85
  • 108
programmer
  • 4,571
  • 13
  • 49
  • 59

11 Answers11

169
var path = window.location.pathname;
var page = path.split("/").pop();
console.log( page );
Daniel Aranda
  • 6,426
  • 2
  • 21
  • 28
  • 2
    This will not work if there is a trailing slash on the url (in cases where the routing disguises an actual filename) – Damon Jun 14 '16 at 19:31
  • 6
    That's is another use case @Damon, if that is an issue for you, add page.split('#').shift(); – Daniel Aranda Jun 16 '16 at 17:58
  • I like this method better because it returns a string instead of an array as with the using `.slice(-1)` in the method [below](https://stackoverflow.com/a/21343880/3965565). – elbowlobstercowstand Jun 28 '20 at 21:52
  • 1
    why not just document.URL.split('/').pop()? – Fai Ng Jan 08 '21 at 04:03
  • If you are going to use an interface instead of the simple use of location object. It would be more accurate use document object, instead of window object. Because if you only are going to read, the location interface inside document, it's read-only. – Kalamarico Dec 31 '21 at 11:52
35

Current page: It's possible to do even shorter. This single line sound more elegant to find the current page's file name:

var fileName = location.href.split("/").slice(-1);

or... 

var fileName = 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; }
Hugolpz
  • 17,296
  • 26
  • 100
  • 187
  • 3
    This is actually an array with only one element if you use location.pathname.split("/").slice(-1) directly as in location.pathname.split("/").slice(-1).includes("OLD") – Dave Nov 02 '17 at 10:14
  • 2
    I like to user location.href.split("#")[0].split("?")[0].split("/").slice(-1) to strip of the queryString and hashes – Gideon Mulder Aug 26 '20 at 08:10
  • @DAve, thanks for adding, so you need a [0] at the end to get the string. – Timo Nov 24 '20 at 09:30
14

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 extract it using the substring method.

cd-CreepArghhh
  • 89
  • 1
  • 7
GIPSSTAR
  • 2,050
  • 1
  • 25
  • 20
7

Use: location.pathname

alert(location.pathname);

http://jsfiddle.net/yQqe3/

https://developer.mozilla.org/en-US/docs/DOM/window.location

Darren
  • 68,902
  • 24
  • 138
  • 144
6

This will work even if the url ends with a /:

var segments = window.location.pathname.split('/');
var toDelete = [];
for (var i = 0; i < segments.length; i++) {
    if (segments[i].length < 1) {
        toDelete.push(i);
    }
}
for (var i = 0; i < toDelete.length; i++) {
    segments.splice(i, 1);
}
var filename = segments[segments.length - 1];
console.log(filename);
Ethan
  • 3,410
  • 1
  • 28
  • 49
5

Use window.location.pathname to get the path of the current page's URL.

Naftali
  • 144,921
  • 39
  • 244
  • 303
4

Get Document Name

location.href.split("/").pop().split("?").shift();

With Query String

location.href.split("/").pop()
Ali Jamal
  • 1,383
  • 1
  • 13
  • 20
1

Single statement that works with trailing slash. If you are using IE11 you'll have to polyfill the filter function.

var name = window.location.pathname
        .split("/")
        .filter(function (c) { return c.length;})
        .pop();
rebelzach
  • 2,670
  • 1
  • 17
  • 14
1
const page = location.href.split("/").slice(-1).toString().replace(".EXTENSION", "").split("?")[0];

This will get the page name also removing the extension (like .html or .php) and eventually all get parameters like (?id=1). If you haven't the extension you can remove the replace() part, otherwise replace .EXTENSION with your preferred extension.

Marco Concas
  • 1,665
  • 20
  • 25
  • There is an API to do that now, URL() see https://developer.mozilla.org/en-US/docs/Web/API/URL – NVRM May 30 '21 at 23:28
0

@Ethan's solution was what I needed but I had to make some changes. Namely, the elements in the toDelete array don't take into account that removing an element from the array segments decrease their number. So here are my two pence:

let segments = window.location.pathname.split('/');
let toDelete = [];
for (let i = 0; i < segments.length; i++) {
    if (segments[i].length < 1) {
        toDelete.push(i);
    }
for (let i = 0; i < toDelete.length; i++ ) {
    segments.splice(toDelete[i], 1);
    for (let j = i; j < toDelete.length; j++ ) {
        (toDelete[j])--;
    }
}
let filename = segments[segments.length - 1];
console.log(filename);
Igor Beuermann
  • 127
  • 1
  • 10
0

If you want to check if it has the path "indexOLD.html" at the end of URL, you can use this as well:

if(window.location.pathname.endsWith("indexODL.html")) {
   // your code block here.
}

These links can be helpful to learn more on each available global interfaces such as window. https://www.w3schools.com/js/js_window_location.asp, https://www.studytonight.com/javascript/javascript-window-object

Demnofocus
  • 21
  • 6