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

Question

¿Hay una manera muy fácil a partir de una URL completa:

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

y extraer sólo la parte del host:

aaa.bbb.ccc.com 

Tiene que ser una función de JavaScript que hace esto de manera confiable, pero no puedo encontrarlo.

Answer 1

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

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

Actualización: acerca de la .origin

***** A medida que el ref estados, la compatibilidad del navegador para window.location.origin no es claro. He comprobado que en cromo y volvió http://sub.domain.com:port si el puerto es cualquier cosa menos 80, y http://sub.domain.com si el puerto es 80.

Un agradecimiento especial a @torazaburo de mencionar que a mí.

Answer 2

Trate

document.location.host 

o

document.location.hostname 

Answer 3

Se podría concatenar el protocolo de localización y el anfitrión:

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

para una dirección URL, por no decir 'http://stackoverflow.com/questions', volverá 'http://stackoverflow.com'

Answer 4

Utilice el objeto document.location y sus propiedades host o hostname.

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

Answer 5

Hay dos formas. La primera es una variante de otra respuesta aquí, pero las cuentas de éste para los 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 URI):

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

Answer 6

Comprobar esto:

alert(window.location.hostname); 

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

y:

window.location.host 

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

Para una completa verificación de referencia Mozilla developer sitio.

Answer 7

uso

window.location.origin

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

se obtiene: http://aaa.bbb.ccc.ddd.com/

Answer 8

Existe otro truco que utilizo y nunca vi en ninguna respuesta de StackOverflow: utilizando el 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, root se 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 utilizar una imagen existente en su lugar para evitar esto, con solo ligeros cambios de código.

Otra variante utiliza un enlace ficticio, sin efectos secundarios sobre las peticiones HTTP:

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

no he probado en todos los navegadores, sin embargo.

Answer 9

Me gustaría especificar algo. Si alguien quiere conseguir toda la url con la ruta que necesito, puede utilizar:

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

Answer 10

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

Tome un vistazo a la 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

Como dijo Martin, las otras respuestas no trabaja con URLs arbitrarias. El nuevo URL object funcionará pero aún es experimental y no es compatible con todos los navegadores.

Para una solución más confiable y de navegador cruzado, puede usar this component He desarrollado para analizar una url arbitraria en propiedades similares a las que se encuentran en el objeto de URL anterior.

Por ejemplo:

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

NEWURL ahora contendrá:

aaa.bbb.ccc.com 

puede importar el componente a utilizar parseURL()

Answer 12

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

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

También podría ser writen en ES5 como

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

Por supuesto IE doen't apoyo Object.assign, pero en mi línea de trabajo, eso no importa.