Como extrair a parte do nome do host de uma URL em JavaScript


379

Existe uma maneira realmente fácil de começar a partir de um URL completo:

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

E extraia apenas a parte do host:

aaa.bbb.ccc.com

Deve haver uma função JavaScript que faça isso de forma confiável, mas não consigo encontrá-la.

Respostas:


827

suponha que você tem uma página com este endereço: http://sub.domain.com/virtualPath/page.htm. use o seguinte no código da página para obter esses resultados:

  • window.location.host: você receberá sub.domain.com:8080ousub.domain.com:80
  • window.location.hostname : você terá sub.domain.com
  • window.location.protocol : você terá http:
  • window.location.port: você receberá 8080ou80
  • window.location.pathname : você terá /virtualPath
  • window.location.origin: você receberá http://sub.domain.com*****

Atualização: sobre o .origin

***** Como o ref afirma, a compatibilidade do navegador para window.location.originnão é clara. Eu verifiquei no chrome e ele retornou http://sub.domain.com:portse a porta não fosse 80 e http://sub.domain.comse a porta fosse 80.

Agradecimentos especiais a @torazaburo por mencionar isso para mim.


Eu tenho um site e 2 aplicativos no IIS. Por exemplo: sub.domínio.com / v1 e sub.domínio.com / v2 e páginas como sub.domínio.com / v1 / Default.aspx ou sub.domínio.com / v2 / Products / Default.aspx , etc. Como eu pode obter valor / v2 , a raiz do meu aplicativo sub.domínio.com /v2 ?
Kiquenet

O @Kiquenet usa um IDE javascript como o WebStorm; você vê as opções possíveis ao escrever o código.
Bhargav Nanekalva

3
window.location.originé indefinido no IE9 (de acordo com o link, é IE11 +). Esta resposta ajudou.
Neolisk

11
Obviamente útil para quase todos, exceto que não responde à pergunta de como extrair parte do host da URL. Engraçado, a resposta correta com a função getRootUrl tem apenas 17 vs 609 votos.
Miro

@Miro a pergunta é respondida não é, o 2º ponto de bala responde à pergunta: window.location.hostname: você vai ter sub.domain.com
Paul

155

Você pode concatenar o protocolo de localização e o host:

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

Para um URL, digamos 'http://stackoverflow.com/questions', ele retornará'http://stackoverflow.com'


5
parece que você deve usar "hostname" em vez de "host" para obter os resultados acima. fonte: stackoverflow.com/questions/6725890/...
user417669

Você pode usar location.origin com o mesmo resultado.
Sérgio

11
A pergunta original não solicitou a parte do protocolo da URL.
Simon East

36

Uso document.locationobjecto e suas hostou hostnamepropriedades.

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

29

A resposta aceita não funcionou para mim, pois queria trabalhar com URLs arbitrários, não apenas com o URL da página atual.

Dê uma olhada no URLobjeto :

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"

11
Obrigado. Por horas, eu tenho procurado um método para extrair o URL que estou recebendo da API. Foi tão simples. Eu só tinha lido em url com o novo URL. Obrigado.
Nodirabegimxonoyim

11
+99999999999999
ADJenks

Uma das duas respostas aqui que não assumem que você está do lado do navegador ...
Will59

não funciona no IE11 :(
Teoman shipahi

24

Existem duas maneiras. A primeira é uma variante de outra resposta aqui, mas essa conta para portas não padrão:

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

Mas eu prefiro esse método mais simples (que funciona com qualquer string URI):

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

3
Obrigado! Eu também gosto do segundo método! especialmente quando no servidor javascript lado, nenhuma maneira de obter window.location :)
trilhões

Uma das duas respostas aqui que não assumem que você está do lado do navegador ... Mas verifique a mais recente de Martin Konecny ​​usando o novo URL.
Will59



3

Há outro truque que eu uso e nunca vi em nenhuma resposta do StackOverflow: o uso do atributo "src" de uma imagem produzirá o caminho base completo do seu site. Por exemplo :

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

Em um URL como http://domain.com/somesite/index.html, rootserá definido como http://domain.com/somesite/. Isso também funciona para o host local ou qualquer URL base válido.

Observe que isso causará uma falha na solicitação HTTP na $imagem fictícia. Você pode usar uma imagem existente para evitar isso, com apenas pequenas alterações no código.

Outra variante usa um link fictício, sem efeito colateral nas solicitações HTTP:

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

Eu não testei em todos os navegadores.


3

Verifique isto:

alert(window.location.hostname);

isso retornará o nome do host como www.domain.com

e:

window.location.host

retornará nome de domínio com porta como www.example.com:80

Para uma referência completa, consulte o site do desenvolvedor Mozilla .


2

Eu gostaria de especificar algo. Se alguém quiser obter o URL inteiro com o caminho que eu preciso, pode usar:

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

por que ir mais longe. Ele pode ser obtido com var fullUrl = window.location.origin + window.location.pathname
Anant

mas às vezes você quer adicionar algo como subdomínio entre o protocolo e hostname por exemplo vários idiomas etc.
crx4

2

Sei que é um pouco tarde, mas criei uma pequena função limpa com uma pequena sintaxe do ES6

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

Também pode ser escrito no ES5, como

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

É claro que o IE não suporta Object.assign, mas na minha linha de trabalho, isso não importa.


1

O Regex fornece muito mais flexibilidade.

    //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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.