How to get base url with jquery or javascript?

javascript

url-manipulation

window-location

base-url

byAnton Shumikhin·Feb 18, 2025

To get the base URL in one fell swoop, you can use window.location.origin.

var baseUrl = window.location.origin;

This grabs the protocol, hostname, and port—basically everything preceding the first slash post-domain. It's a quick and dirty solution for your scripts!

If you need a more fine-grained solution or want to account for <base> tags or URL paths, you're in the right place!

Dissecting the base URL

JavaScript's window.location object holds the key URL components you can manipulate:

window.location.hostname for your sweet domain name 🍩.
window.location.protocol gives you the correct protocol (http: or https:), because you wouldn't want your URL to have an identity crisis, would you?
window.location.host fetches both the hostname and any lonely port hanging out there.

When dealing with folder-level base URLs, window.location.pathname has your back:

// Where we're going, we don't need doors
var pathArray = window.location.pathname.split('/');

Using this, you can construct the folder path like a lego tower:

// Assembling the ultimate fort
var folderPath = pathArray.slice(0, pathArray.length - 1).join('/');

Not to brag, but this method handles domain and folder variations like a well-behaved puppy on a leash.

Tag - You're it: Working with <base> tag

Occasionally, you might stumble upon a <base> tag redefining the base URL. In such times, document.baseURI is the superhero:

var baseURI = document.baseURI;

With this, you account for the <base> tag if needed, crafting a bulletproof solution that adapts to your document's layout.

Getting funky: Dynamically adjusting base URL

There might come a time when you'd need to manipulate the base URL dynamically. This could be due to client-side routing, URL rewrites, or because you love living on the edge (cheers, we love the adrenaline rush too!)

To redefine the global base URL sans a <base> tag, you could inject it via JavaScript, like a coffee shot to your code:

document.head.innerHTML += '<base href="http://example.com/" />';

Building a manual base URL? Don't forget to account for potential domain or folder changes. Developers know consistency is key — never hurts to remind.
In a labyrinthine application, stick to using window.location for reliable and comprehensive current URL information.
No one likes uncertainties. Use an absolute base URL approach for consistency across different scenarios or different trailblazer subpaths.