3 Ways of Get base url in javascript – Get Absolute Path, Document Root, Base URL

get base url in javascript : We run time into a some difficult face issue while developing a fresh new website where We needed to get a specific some part of URL. Think of a URL, http://your-domain-name/dev/index.html. We want to extract both the base URL and the root URL which are,

    http://your-domain-name/
and

    http://your-domain-name/dev/

in my case.

If We relocate the online website in the future, my simple script will continue to work. For Example, if We move into more deeper folder like as a,

    http://your-domain-name/dev/demo/path/index.html

my simple Js script will provide our the correct folder names without any error, meaning that the script will dynamically calculate the depth of the folder structure as well as provide our correct URL. In this case, it will provide our

Read Also:  js check if array is empty

    http://your-domain-name/
//and
    http://your-domain-name/dev/demo/path/

as root and base URL respectively.

here you can Get WebSite Root Relative Path by JavaScript Example.

get base url in javascript

Q: How to get Base URL or Root URL using Javascript?
We found some best 5 solution as well as come up with main 2 function which will provide root URL as well as base URL. They are written below.

Example: find base url in javascript

var base_url = window.location.origin;

var host = window.location.host;

var pathArray = window.location.pathname.split( '/' );

For Root URL:

function getRootUrl() {
            document.getElementById('rootresult').innerHTML += 
            window.location.origin 
                ? window.location.origin + '/'
                : window.location.protocol + '/' + window.location.host + '/';
            
            //
            getBaseUrl();
        }

For Base URL:

function getBaseUrl() {
            var baseUrl = new RegExp(/^.*\//);
            document.getElementById('display_your_url').innerHTML += baseUrl.exec(window.location.href);
        }

javascript get base url

js get base url

var baseUrl = window.location.origin;

how to get base url in javascript?

console.log(window.location.origin);

how to get base url in jquery

jquery get base url

var findCurrentURL = $(location).attr('href'); 
var findCurrentURL = window.location.href;

get base url in jquery

you can get base url with jquery or javascript Example

var findCurrentURL = window.location;
var baseUrl = findCurrentURL .protocol + "//" + findCurrentURL.host + "/" + findCurrentURL.pathname.split('/')[1];

Get absolute path in javascript

location.pathname gives you the local part of the url.

Read Also:  Laravel Server Side Individual Column Filtering

var getproducts = location.pathname.match(/[^\/]+$/)[0]

For example, if you are on http://pakainfo/api/getproducts.html, it will give you getproducts.html

window.location object you will display bellow

hash:       
host:       pakainfo.com
hostname:   pakainfo.com
href:       http://pakainfo.com/answer/982562052/find-base-path-in-jquery
pathname:   /answer/896565656/find-base-path-in-jquery
port:       
protocol:   http:
search:     

Don’t Miss : Javascript Get Current Url

How to Select the Document Root Element With JavaScript?

Using document.documentElement

console.log(document.documentElement);

Using document.querySelector()

console.log(document.querySelector(':root'));


I hope you get an idea about get base url in javascript.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.