How To Get The Base Url In Javascript

Getting the base URL in JavaScript can be handy when working on web development projects. Knowing how to retrieve the base URL of a website using JavaScript can help you dynamically generate links, load external resources, or navigate within your web application efficiently. In this article, we'll explore a few methods to easily fetch the base URL in JavaScript.

Method 1: Using the location Object
One straightforward way to obtain the base URL is by utilizing the `location` object provided by the browser. The `location` object contains information about the current URL, including the protocol, host, and pathname. To extract the base URL, you can concatenate these properties as shown in the code snippet below:

const baseURL = window.location.protocol + '//' + window.location.host;
console.log(baseURL);

In this code snippet, `window.location.protocol` returns the protocol (http: or https:), while `window.location.host` provides the hostname and port number of the URL. By combining these two values, you can derive the base URL of the webpage.

Method 2: Using the document Element
Another approach to acquiring the base URL is by leveraging the `document` object in JavaScript. You can access the URL information through the `document.URL` property and extract the protocol and hostname to construct the base URL. Here's an example demonstrating this method:

const baseURL = document.URL.split('/').slice(0, 3).join('/');
console.log(baseURL);

In this code snippet, `document.URL` returns the complete URL of the current document. By splitting the URL using the forward slash ('/') delimiter and selecting the protocol, hostname, and the segment following the hostname, you can form the base URL.

Method 3: Using a Regular Expression
Alternatively, you can employ a regular expression to extract the base URL from the current URL string. Regular expressions provide flexibility in pattern matching, allowing you to target specific parts of the URL. The following code snippet demonstrates how you can use a regular expression to fetch the base URL:

const baseURL = window.location.href.match(/^.*://[^/]+/)[0];
console.log(baseURL);

In this code snippet, the regular expression `/^.*://[^/]+/` matches the protocol and hostname portion of the URL. By applying this pattern to the URL string obtained from `window.location.href`, you can isolate the base URL effectively.

By employing these methods, you can easily retrieve the base URL in JavaScript for your web development projects. Whether you prefer utilizing the `location` object, `document` element, or regular expressions, each approach offers a simple and efficient way to access the base URL dynamically. Experiment with these techniques and integrate them into your code to enhance the functionality and versatility of your web applications.