How can I get the name of an html page in Javascript?

JavascriptHtml

Javascript Problem Overview


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"

Javascript Solutions


Solution 1 - Javascript

var path = window.location.pathname;
var page = path.split("/").pop();
console.log( page );

Solution 2 - Javascript

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; }

Solution 3 - Javascript

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.

Solution 4 - Javascript

Solution 5 - Javascript

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);

Solution 6 - Javascript

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

Solution 7 - Javascript

Get Document Name

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

With Query String

location.href.split("/").pop()

Solution 8 - Javascript

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();

Solution 9 - Javascript

@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);

Solution 10 - Javascript

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.

Solution 11 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionprogrammerView Question on Stackoverflow
Solution 1 - JavascriptDaniel ArandaView Answer on Stackoverflow
Solution 2 - JavascriptHugolpzView Answer on Stackoverflow
Solution 3 - JavascriptGaurang PView Answer on Stackoverflow
Solution 4 - JavascriptDarrenView Answer on Stackoverflow
Solution 5 - JavascriptEthanView Answer on Stackoverflow
Solution 6 - JavascriptNaftaliView Answer on Stackoverflow
Solution 7 - JavascriptAli JamalView Answer on Stackoverflow
Solution 8 - JavascriptrebelzachView Answer on Stackoverflow
Solution 9 - JavascriptIgor BeuermannView Answer on Stackoverflow
Solution 10 - JavascriptMarco ConcasView Answer on Stackoverflow
Solution 11 - JavascriptDemnofocusView Answer on Stackoverflow