Jak wyodrębnić część nazwy hosta z adresu URL w JavaScript

379

Czy istnieje naprawdę łatwy sposób na rozpoczęcie od pełnego adresu URL:

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

I wyodrębnij tylko część hosta:

aaa.bbb.ccc.com

Musi istnieć funkcja JavaScript, która robi to niezawodnie, ale nie mogę jej znaleźć.

Dustin Getz
źródło

Odpowiedzi:

826

Przypuszczam, że masz stronę z adresem: http://sub.domain.com/virtualPath/page.htm. użyj następującego kodu strony, aby uzyskać te wyniki:

  • window.location.host: dostaniesz sub.domain.com:8080lubsub.domain.com:80
  • window.location.hostname : dostaniesz sub.domain.com
  • window.location.protocol : dostaniesz http:
  • window.location.port: dostaniesz 8080lub80
  • window.location.pathname : dostaniesz /virtualPath
  • window.location.origin: dostaniesz http://sub.domain.com*****

Aktualizacja: o .origin

***** Jak wskazuje odnośnik , zgodność przeglądarki dla window.location.originnie jest jasna. Sprawdziłem to w chrome i zwróciło, http://sub.domain.com:portjeśli port ma wartość inną niż 80, a http://sub.domain.comjeśli port to 80.

Specjalne podziękowania dla @torazaburo za to, że mi o tym wspomniał.

Amin Saqi
źródło
Mam stronę internetową i 2 aplikacje w IIS. Np .: sub.domain.com/v1 i sub.domain.com/v2 oraz strony takie jak sub.domain.com/v1/Default.aspx lub sub.domain.com/v2/Products/Default.aspx itp. Jak ja mogę uzyskać wartość / v2 , katalog główny mojej aplikacji sub.domain.com/v2 ?
Kiquenet,
@Kiquenet używa IDE javascript, takiego jak WebStorm, możesz zobaczyć możliwe opcje podczas pisania kodu.
Bhargav Nanekalva
3
window.location.originjest niezdefiniowany w IE9 (zgodnie z linkiem, to IE11 +). Ta odpowiedź pomogła.
Neolisk
1
Oczywiście pomocne dla prawie wszystkich, z wyjątkiem tego, że nie odpowiada na pytanie, jak wyodrębnić część hosta z adresu URL. Śmieszne, poprawna odpowiedź z funkcją getRootUrl ma tylko 17 vs 609 głosów.
Miro,
@Miro odpowiedziano na pytanie, prawda? Drugi punkt odpowiada na pytanie: window.location.hostname: dostaniesz sub.domain.com
Paul
155

Możesz połączyć protokół lokalizacji i hosta:

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

W przypadku adresu URL, powiedzmy 'http://stackoverflow.com/questions', wróci'http://stackoverflow.com'

CMS
źródło
5
wygląda na to, że powinieneś użyć „nazwy hosta” zamiast „hosta”, aby osiągnąć powyższe wyniki. źródło: stackoverflow.com/questions/6725890/…
user417669
Możesz użyć location.origin z tym samym rezultatem.
Sérgio
1
Pierwotne pytanie nie zawierało części protokołu dotyczącej adresu URL.
Simon East
36

Zastosowanie document.locationprzedmiotu i jego hostOR hostnamewłaściwości.

alert(document.location.hostname); // alerts "stackoverflow.com"
n1313
źródło
29

Przyjęta odpowiedź nie działała dla mnie, ponieważ chciałem móc pracować z dowolnym dowolnym adresem URL, a nie tylko bieżącym adresem URL strony.

Spójrz na URLobiekt :

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"
Martin Konecny
źródło
1
Dziękuję Ci. Od wielu godzin szukam metody, aby wyodrębnić adres URL, który otrzymuję z interfejsu API. To było takie proste. Przeczytałem go tylko w adresie URL z nowym adresem URL. Dziękuję Ci.
Nodirabegimxonoyim
1
+9999999999999999
ADJenks
Jedna z dwóch odpowiedzi tutaj, które nie zakładają, że jesteś po stronie przeglądarki rzeczy ...
Will59
nie działa na IE11 :(
Teoman shipahi
24

Istnieją dwa sposoby. Pierwsza jest wariantem innej odpowiedzi tutaj, ale ta odpowiada na porty inne niż domyślne:

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

Ale wolę tę prostszą metodę (która działa z dowolnym ciągiem URI):

function getRootUrl(url) {
  return url.toString().replace(/^(.*\/\/[^\/?#]*).*$/,"$1");
}
Danorton
źródło
3
Dziękuję Ci! Bardziej podoba mi się też druga metoda! szczególnie, gdy po stronie serwera javascript, nie ma możliwości, aby uzyskać window.location :)
tryliony
Jedna z dwóch odpowiedzi tutaj, które nie zakładają, że jesteś po stronie przeglądarki ... Ale sprawdź najnowszą od Martina Konecnego, używając nowego adresu URL.
Will59
6

Próbować

document.location.host

lub

document.location.hostname
Chris Nielsen
źródło
3

Jest inny hack, którego używam i nigdy nie widziałem w żadnej odpowiedzi StackOverflow: użycie atrybutu „src” obrazu da pełną ścieżkę bazową witryny. Na przykład :

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

Na zasadzie jak adres URL http://domain.com/somesite/index.html, rootzostanie ustawiony http://domain.com/somesite/. Działa to również dla localhost lub dowolnego poprawnego podstawowego adresu URL.

Pamiętaj, że spowoduje to nieudane żądanie HTTP dla $obrazu zastępczego. Aby tego uniknąć, możesz użyć istniejącego obrazu, z niewielkimi zmianami kodu.

Inny wariant wykorzystuje fałszywy link, bez skutków ubocznych na żądania HTTP:

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

Nie przetestowałem tego jednak w każdej przeglądarce.

kuroi neko
źródło
3

Sprawdź to:

alert(window.location.hostname);

zwróci to nazwę hosta jako www.domain.com

i:

window.location.host

zwróci nazwę domeny z portem podobnym do www.example.com:80

Aby uzyskać pełne informacje, sprawdź witrynę programisty Mozilla .

code.rider
źródło
2

Chciałbym coś sprecyzować. Jeśli ktoś chce uzyskać cały adres URL ze ścieżką, której potrzebuję, może użyć:

var fullUrl = window.location.protocol + "//" + window.location.hostname + window.location.pathname;
crx4
źródło
po co iść dalej. Można go uzyskać za pomocą var fullUrl = window.location.origin + window.location.pathname
Anant
ale czasami chcesz dodać coś takiego jak subdomena między protokołem a nazwą hosta, np. wielojęzyczny itp.
crx4
2

Wiem, że to trochę za późno, ale zrobiłem czystą małą funkcję z małą składnią ES6

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

Może być również napisany w ES5 jak

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

Oczywiście IE nie obsługuje Object.assign, ale w mojej branży to nie ma znaczenia.

Noah Cardoza
źródło
1

Regex zapewnia znacznie większą elastyczność.

    //document.location.href = "http://aaa.bbb.ccc.com/asdf/asdf/sadf.aspx?blah
    //1.
     var r = new RegExp(/http:\/\/[^/]+/);
     var match = r.exec(document.location.href) //gives http://aaa.bbb.ccc.com

    //2. 
     var r = new RegExp(/http:\/\/[^/]+\/[^/]+/);
     var match = r.exec(document.location.href) //gives http://aaa.bbb.ccc.com/asdf
mvs
źródło