How to extract the hostname portion of a URL in JavaScript

How to extract the hostname portion of a URL in JavaScript

Is there a really easy way to start from a full URL:
document.location.href = “http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah”

And extract just the host part:
aaa.bbb.ccc.com

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

Solutions/Answers:

Solution 1:

suppose that you have a page with this address: http://sub.domain.com/virtualPath/page.htm. use the following in page code to achive those results:

  • window.location.host : you’ll get sub.domain.com:8080 or sub.domain.com:80
  • window.location.hostname : you’ll get sub.domain.com
  • 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 http://sub.domain.com *****

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 http://sub.domain.com:port if the port is anything but 80, and http://sub.domain.com if the port is 80.

Special thanks to @torazaburo for mentioning that to me.

Solution 2:

You could concatenate the location protocol and the host:

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

For a url, let say 'http://stackoverflow.com/questions', it will return 'http://stackoverflow.com'

Solution 3:

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

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

Solution 4:

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");
}

Solution 5:

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("http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah");
url.protocol;  // "http:"
url.hostname;  // "aaa.bbb.ccc.com"
url.pathname;  // "/asdf/asdf/sadf.aspx"
url.search;    // "?blah"

Solution 6:

use

window.location.origin

and for: “http://aaa.bbb.ccc.ddd.com/sadf.aspx?blah

you will get: http://aaa.bbb.ccc.ddd.com/