How to Get the Base URL in JavaScript?

How to Get the Base URL in JavaScript?

by

If you want to know how to retrieve or get the base URL in JavaScript, this article is for you.

In this article, we will guide you and cover everything you need to know, with step-by-step instructions and code examples.

Don’t miss out on this essential knowledge for any web developer. Continue to read on to learn more about JavaScript get base url!

What is URL?

URL stands for Uniform Resource Locator.

A URL is like the address of a webpage or resource on the Internet. It consists of a protocol (like “https://”) followed by the address.

In addition to that, a URL is like a house address for the internet. Just as you need an address to find a house, you need a URL to find a specific web page or resource online.

The URL tells your web browser where to go to find the information you want.

It includes things like the protocol (HTTP or HTTPS), the domain name (www.itsourcecode.com), and sometimes additional details like the specific page or files you’re looking for.

Here’s the syntax to get URL in JavaScript:

document.URL

How to get base URL in JavaScript?

To start, open the website https://itsourcecode.com/ and then type the given code into the console of your web browser.

You can use Ctrl + Shift + J for Windows and Command+ Option + J for Mac to pen the Console panel.

const url_var = document.URL;

console.log(url_var);

Output:

get url base javascript

Another approach to retrieve the base URL from a given URL in JavaScript is by creating a URL object instance and extracting the necessary parts of the base URL from it.

const url = new URL("https://itsourcecode.com/javascript-online-compiler-editor/")
const baseUrl = `${url.protocol}//${url.hostname}`
console.log(baseUrl)

Output:

https://itsourcecode.com

How to get base from the current URL in JavaScript?

To get the base URL of the current webpage using JavaScript, you can make use of the window.location object.

Here’s the syntax:

window.location.href

Here’s the example code:

const url_var = window.location.href;
console.log(url_var);

Here’s an example: Go to the website https://itsourcecode.com/topics/blogs/ and then type the given code into your web browser’s console.

You can use Ctrl + Shift + J for Windows and Command+ Option + J for Mac to pen the Console panel.

Output:

https://itsourcecode.com/topics/blogs/

The document.URL, which we discussed above, is also used to get the current URL.

Just like window.location, however, we used window.location to show you more functionalities.

Here’s another example in HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <h1>Base URL Example</h1>
    <p id="output"></p>

    <script>
        // Get the base URL and host name


        const baseUrl = window.location.origin;
        const host = window.location.host;

        // Output the base URL and host name to the page

        document.getElementById("output").innerHTML = `Base URL: ${baseUrl}<br>Host: ${host}`;
    </script>
</body>
</html>

How to get URL origin in JavaScript?

The window.location.origin property provides the base URL along with the protocol (e.g., “https://www.sample.com”), while the window.location.host property gives you just the host name (e.g., “www.sample.com”).

Here’s the syntax:

window.location.origin

Here’s the example code:

const url_var = window.location.origin;
console.log(url_var);

Here’s an example: Go to the website https://itsourcecode.com/topics/blogs/ and then type the given code into your web browser’s console.

You can use Ctrl + Shift + J for Windows and Command+ Option + J for Mac to pen the Console panel.

Output:

https://itsourcecode.com

How to get the base URL from a string in JavaScript?

If you have a URL as a string and want to extract the base URL from it, you can do that by using the URL constructor and the URL.origin property.

Here’s an example to help you understand:

const urlString = "https://itsourcecode.com/topics/blogs/";
const url = new URL(urlString);
const baseUrl = url.origin;
console.log(baseUrl);

Output:

https://itsourcecode.com

If you want to get the location origin and host along with pathArray, execute the following.

Here’s an example: Go to the website https://itsourcecode.com/topics/blogs/ and then type the given code into your web browser’s console.

You can use Ctrl + Shift + J for Windows and Command+ Option + J for Mac to pen the Console panel.

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

console.log("Base URL:", base_url);
console.log("Host:", host);
console.log("Path Array:", pathArray);

Output:

Base URL: https://itsourcecode.com
Host: itsourcecode.com
Path Array: (4) ['', 'topics', 'blogs', '']

Conclusion

In conclusion, this article provided easy-to-understand instructions and examples on how to get the base URL in JavaScript.

We explained that a URL is like an address for a webpage or resource on the Internet and discussed its components, such as the protocol and domain name.

We covered three main methods for getting the base URL in JavaScript: using a document.URL, creating a URL object, and utilizing window.location and window.location.origin.

Each method was accompanied by a sample code and instructions on how to use it in the browser console.

We also provided an example of extracting the base URL from a string using the URL constructor.

By following the solutions given above, developers can easily obtain the base URL for their web applications.

We are hoping that this article provides you with enough information that helps you understand the JavaScript get base URL .

You can also check out the following article:

Thank you for reading itsourcecoders 😊.

Leave a Comment