How to extract the hostname portion of a URL in JavaScript

  • Added:
  • |
  • In: Wordpress

Is there a really easy way to start from a full URL:

document.location.href = ""

And extract just the host part:

There's gotta be a JavaScript function that does this reliably, but I can't find it.

This Question Has 11 Answeres | Orginal Question | Dustin Getz

I would like to specify something. If someone want to get the whole url with path like I need, can use:

var fullUrl = window.location.protocol + "//" + window.location.hostname + window.location.pathname;

You could concatenate the location protocol and the host:

var root = location.protocol + '//' +;

For a url, let say '', it will return ''

There are two ways. The first is a variant of another answer here, but this one accounts for non-default ports:

function getRootUrl() {
  var defaultPorts = {"http:":80,"https:":443};

  return window.location.protocol + "//" + window.location.hostname
   + (((window.location.port)
    && (window.location.port != defaultPorts[window.location.protocol]))
    ? (":"+window.location.port) : "");

But I prefer this simpler method (which works with any URI string):

function getRootUrl(url) {
  return url.toString().replace(/^(.*\/\/[^\/?#]*).*$/,"$1");

There is another hack I use and never saw in any StackOverflow response : using "src" attribute of an image will yield the complete base path of your site. For instance :

var dummy = new Image;
dummy.src = '$';                  // using '' will fail on some browsers
var root = dummy.src.slice(0,-1); // remove trailing '$'

On an URL like,root will be set to This also works for localhost or any valid base URL.

Note that this will cause a failed HTTP request on the $ dummy image. You can use an existing image instead to avoid this, with only slight code changes.

Another variant uses a dummy link, with no side effect on HTTP requests :

var dummy = document.createElement ('a');
dummy.href = '';
var root = dummy.href;

I did not test it on every browser, though.

Use document.location object and its host or hostname properties.

alert(document.location.hostname); // alerts ""

The accepted answer didn't work for me since wanted to be able to work with any arbitary url's, not just the current page URL.

Take a look at the URL object:

var url = new URL("");
url.protocol;  // "http:"
url.hostname;  // ""
url.pathname;  // "/asdf/asdf/sadf.aspx";    // "?blah"

suppose that you have a page with this address: use the following in page code to achive those results:

  • : you'll get or
  • window.location.hostname : you'll get
  • window.location.protocol : you'll get http:
  • window.location.port : you'll get 8080 or 80
  • window.location.pathname : you'll get /virtualPath
  • window.location.origin : you'll get *****

Update: about the .origin

***** As the ref states, browser compatibility for window.location.origin is not clear. I've checked it in chrome and it returned if the port is anything but 80, and if the port is 80.

Special thanks to @torazaburo for mentioning that to me.

Check this:


this will return host name as


will return domain name with port like

For complete reference check Mozilla developer site.






and for: ""

you will get:

As Martin said, the other answers won't work with arbitrary urls. The new URL object will work but is still experimental and not compatible with all browsers.

For a more reliable and cross browser solution, you can use this component I built to parse an arbitrary url into properties similar to those found in the above URL object.

For example:

var urlObject = parseUrl('');
var newUrl = urlObject.hostname;

newUrl will now contain:

You can import the component to use parseUrl()

Meet with owner

Sajjad Hossain

Hey, I am Sajjad, working in web development sector since 2012. I love to do amazing things. Let's do a project together.
Connect Social With PHPAns