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.URLHow 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:
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.comHow 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.hrefHere’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.comHow 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.comIf 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 😊.
Official documentation
Quick step-by-step summary (click to expand)
- What is URL. Read the ‘What is URL?’ section for the details and code.
- How to get base URL in JavaScript. Read the ‘How to get base URL in JavaScript?’ section for the details and code.
- How to get base from the current URL in JavaScript. Read the ‘How to get base from the current URL in JavaScript?’ section for the details and code.
- How to get URL origin in JavaScript. Read the ‘How to get URL origin in JavaScript?’ section for the details and code.
- How to get the base URL from a string in JavaScript. Read the ‘How to get the base URL from a string in JavaScript?’ section for the details and code.
Frequently Asked Questions
Is JavaScript still worth learning in 2026?
What is the difference between var, let, and const?
Which JavaScript version should I target in 2026?
What is the best free editor for JavaScript?
How do I run JavaScript locally vs in the browser?
What can I build with JavaScript for my BSIT capstone?
Caren Bautista
Technical Writer at PIES IT Solution
Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.
Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
· View all posts by Caren Bautista →