Cómo extraer la parte del nombre de host de una URL en JavaScript

¿Existe una manera realmente fácil de comenzar desde una URL completa:

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

Y extraiga solo la parte del host:

aaa.bbb.ccc.com

Debe haber una función de JavaScript que haga esto de manera confiable, pero no puedo encontrarla.

suponga que tiene una página con la siguiente dirección: http://sub.domain.com/virtualPath/page.htm. use el siguiente código de página para lograr esos resultados:

• window.location.host: obtendrás sub.domain.com:8080osub.domain.com:80
• window.location.hostname : usted obtendrá sub.domain.com
• window.location.protocol : usted obtendrá http:
• window.location.port: obtendrás 8080o80
• window.location.pathname : usted obtendrá /virtualPath
• window.location.origin: obtendrás http://sub.domain.com*****

Actualización: sobre el .origin

***** Como dice la referencia , la compatibilidad del navegador window.location.originno está clara. Lo revisé en Chrome y me devolvió http://sub.domain.com:portsi el puerto es cualquier cosa menos 80, y http://sub.domain.comsi el puerto es 80.

Un agradecimiento especial a @torazaburo por mencionarme eso.

Puede concatenar el protocolo de ubicación y el host:

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

Para una url, digamos 'http://stackoverflow.com/questions', volverá'http://stackoverflow.com'

Usar document.locationobjeto y sus hosto hostnamepropiedades.

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

La respuesta aceptada no funcionó para mí, ya que quería poder trabajar con cualquier URL arbitraria, no solo con la URL de la página actual.

Echa un vistazo al 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"

Hay dos maneras. La primera es una variante de otra respuesta aquí, pero esta cuenta para puertos no predeterminados:

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

Pero prefiero este método más simple (que funciona con cualquier cadena de URI):

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

utilizar

window.location.origin

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

obtendrá: http://aaa.bbb.ccc.ddd.com/

Tratar

document.location.host

o

document.location.hostname

Hay otro truco que uso y que nunca vi en ninguna respuesta de StackOverflow: el uso del atributo "src" de una imagen generará la ruta base completa de su sitio. Por ejemplo :

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

En una URL como http://domain.com/somesite/index.html, rootse establecerá en http://domain.com/somesite/. Esto también funciona para localhost o cualquier URL base válida.

Tenga en cuenta que esto provocará una solicitud HTTP fallida en la $imagen ficticia. Puede usar una imagen existente en su lugar para evitar esto, con solo pequeños cambios en el código.

Otra variante utiliza un enlace ficticio, sin efectos secundarios en las solicitudes HTTP:

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

Sin embargo, no lo probé en todos los navegadores.

Mira esto:

alert(window.location.hostname);

esto devolverá el nombre de host como www.domain.com

y:

window.location.host

devolverá el nombre de dominio con puerto como www.example.com:80

Para una referencia completa, consulte el sitio para desarrolladores de Mozilla .

Me gustaría especificar algo. Si alguien quiere obtener la URL completa con la ruta como la que necesito, puede usar:

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

Sé que esto es un poco tarde, pero hice una pequeña función limpia con un poco de sintaxis ES6

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

También podría escribirse en ES5 como

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

Por supuesto, IE no es compatible Object.assign, pero en mi línea de trabajo, eso no importa.

Regex proporciona mucha más flexibilidad.

    //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