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

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.

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.

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'

Uso document.locationobjecto e suas hostou hostnamepropriedades.

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

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"

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

usar

window.location.origin

e para: " http://aaa.bbb.ccc.ddd.com/sadf.aspx?blah "

você receberá: http://aaa.bbb.ccc.ddd.com/

Tentar

document.location.host

ou

document.location.hostname

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.

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 .

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;

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.

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