Home/ Questions/Q 6599487
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T18:29:52+00:00

Need help! I’ve been looking for a solution for this seemingly simple task but

  • 0

Need help! I’ve been looking for a solution for this seemingly simple task but can’t find an exact one. Anyway, I’m trying to add custom #id to the tag based on the page’s URL. The script I’m using works ok when the URLs are like these below.

- http://localhost.com/index.html
- http://localhost.com/page1.html
- http://localhost.com/page2.html
-> on this level, <body> gets ids like #index, #page1, #page2, etc...

My question is, how can I make the body #id still as #page1 or #page2 even when viewing subpages like this?

- http://localhost.com/page1/subpage1
- http://localhost.com/page2/subpage2

Here’s the JS code I’m using (found online)

$(document).ready(function() {
    var pathname = window.location.pathname; 
    var getLast = pathname.match(/.*\/(.*)$/)[1];
    var truePath = getLast.replace(".html",""); 
            if(truePath === "") { 
                    $("body").attr("id","index");
            }
            else { 
                    $("body").attr("id",truePath);
            }       
    });

Thanks in advance!

edit: Thanks for all the replies! Basically I just want to put custom background images on every pages based on their body#id. >> js noob here.

http://localhost.com/page2/subpage2 - > my only problem is how to make the id as #page2 and not #subpage2 on this link.
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using the javascript split function might be of help here. For example (untested, but the general idea):

    var url = window.location.href.replace(/http[s]?:\/\//, '').replace('.html', '');
var segments = url.split('/');

$('body').id = segments[0];

    Also, you might want to consider using classes instead of ID’s. This way you could assign every segment as a class…

    var url = window.location.href.replace(/http[s]?:\/\//, '').replace('.html', '');
var segments = url.split('/');

for (var i = 0; i < segments.length; i++) {
    $('body').addClass(segments[i]);
}

    EDIT:

    Glad it worked. Couple of notes if you’re planning on using this for-real: If you ever have an extension besides .html that will get picked up in the class name. You can account for this by changing that replace to a regex…

    var url = window.location.href.replace(/http[s]?:\/\//, '');
// Trim extension
url = url.replace(/\.(htm[l]?|asp[x]?|php|jsp)$/,'');

    If there will ever be querystrings on the URL you’ll want to filter those out too (this is the one regex I’m not 100% on)…

    url = url.replace(/\?.+$/,'');

    Also, it’s a bit inefficient to have the $('body') in every for loop “around” as this causes jQuery to have to re-find the body tag. A more performant way to do this, especially if the sub folders end up 2 or 3 deep would be to find it once, then “cache” it to a variable like so..

    var $body = $('body');
for ( ... ) {
   $body.addClass( ...
}
    • 0