如何提取一個URL的主機名部分在JavaScript

Question

有一個非常簡單的方法，從一個完整的URL開始：

document.location.href = "http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah" 

而且只提取主機部分：

aaa.bbb.ccc.com 

有總得做一個可靠的JavaScript功能，但我找不到它。

Answer 1

假設你有一個頁面，這個地址：http://sub.domain.com/virtualPath/page.htm。使用下面的頁面代碼才達到這些結果：

• window.location.host：你會得到sub.domain.com:8080或sub.domain.com:80
• window.location.hostname：你會得到sub.domain.com
• window.location.protocol：你會得到http:
• window.location.port ：你會得到8080或80
• window.location.pathname：你會得到/virtualPath
• window.location.origin：你會得到http://sub.domain.com *****

更新：關於.origin

*****至於window.location.origin的ref狀態，瀏覽器兼容性不明確。我已經檢查過它在鉻中，它返回http://sub.domain.com:port如果端口是80而沒有任何東西，並且http://sub.domain.com如果端口是80.

特別感謝@torazaburo提到我。

Answer 2

嘗試

document.location.host 

或

document.location.hostname 

Answer 3

你可以串連位置協議和主機：

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

的URL，讓說'http://stackoverflow.com/questions'，它將返回'http://stackoverflow.com'

Answer 4

使用document.location對象及其host或hostname屬性。

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

Answer 5

有兩種方法。首先是這裏的另一個答案的一個變體，但是這一次佔非默認端口：

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

但我更喜歡這種簡單的方法（這與任何URI字符串作品）：

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

Answer 6

檢查這樣的：

alert(window.location.hostname); 

這將返回主機名www.domain.com

和：

window.location.host 

將端口返回域名如www.example.com:80

有關完整的參考檢查Mozilla developer網站。

Answer 7

使用

window.location.origin

和 「http://aaa.bbb.ccc.ddd.com/sadf.aspx?blah」

您將獲得：http://aaa.bbb.ccc.ddd.com/

Answer 8

還有一個黑客我使用，從未在任何StackOverflow響應中看到： 使用圖像的「src」屬性將產生您的網站的完整基本路徑。 例如：

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

像http://domain.com/somesite/index.html的URL， root將被設置爲http://domain.com/somesite/。 這也適用於本地主機或任​​何有效的基本URL。

請注意，這將導致$啞圖像上的HTTP請求失敗。 您可以使用現有的圖像來避免這種情況，只需輕微更改代碼即可。

另一個變例使用虛設鏈，對HTTP請求無副作用：

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

我沒有測試它在所有的瀏覽器，但。

Answer 9

我想指定一些東西。如果有人想與路徑的整個URL像我所需要的，可以使用：

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

Answer 10

接受的答案並沒有爲我工作，因爲希望能夠與任何arbitary的URL，而不僅僅是當前頁面的工作URL。

看看在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" 

Answer 11

正如馬丁所說，其他的答案不會任意網址。新的URL object可以工作，但仍然是實驗性的，並且與所有瀏覽器不兼容。

對於更可靠和跨瀏覽器的解決方案，您可以使用我構建的this component將任意url解析爲與上述URL對象中類似的屬性。

例如：

var urlObject = parseUrl('http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah'); 
var newUrl = urlObject.hostname; 

NEWURL現在將包含：

aaa.bbb.ccc.com 

可以導入使用的parseURL（）

Answer 12

我知道這是一個有點晚分量，但我用一點ES6語法做了一個乾淨的小功能

function getHost(href){ 
    return Object.assign(document.createElement('a'), { href }).host; 
} 

它也可以在ES5被writen像

function getHost(href){ 
    return Object.assign(document.createElement('a'), { href: href }).host; 
} 

當然IE doen't支持Object.assign，但在我的工作中，這並不重要。