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 = "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.

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 + '//' + location.host; 

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

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 http://domain.com/somesite/index.html, root will be set to http://domain.com/somesite/. 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 "stackoverflow.com" 

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" 

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.

Check this:

alert(window.location.hostname); 

this will return host name as www.domain.com

and:

window.location.host 

will return domain name with port like www.example.com:80

For complete reference check Mozilla developer site.

Try

document.location.host 

or

document.location.hostname 

use

window.location.origin

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

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

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('http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah'); var newUrl = urlObject.hostname; 

newUrl will now contain:

aaa.bbb.ccc.com 

You can import the component to use parseUrl()


Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

Connect Social With PHPAns
Top