Obtener protocolo, dominio y puerto de URL


301

Necesito extraer el protocolo completo, el dominio y el puerto de una URL determinada. Por ejemplo:

https://localhost:8181/ContactUs-1.0/contact?lang=it&report_type=consumer
>>>
https://localhost:8181

99
Para aquellos lectores que buscan una respuesta donde la URL no es la ubicación actual, mire debajo de la respuesta aceptada
Guy Schalnat,

Respuestas:


150

primero obtenga la dirección actual

var url = window.location.href

Entonces solo analiza esa cadena

var arr = url.split("/");

tu url es:

var result = arr[0] + "//" + arr[2]

Espero que esto ayude


8
Esto funciona con una cadena URL donde el locationobjeto no está disponible (¡fuera del navegador!)
Thamme Gowda

La respuesta de David Calhoun usa el analizador incorporado (como location) pero puede usarse para cualquier url. Compruébalo, está ordenado.
Stijn de Witt

66
O simplemente conviértalo en una frase:window.location.href.split('/').slice(0, 3).join('/')
Ryan McGeary

¿Y cómo harías esto en el nodo?
DDD

55
window.location.origin
int soumen

576
var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');

3
@Randomblue ¿Qué hay de eso? Lo conseguirás about://. Sin embargo, tengo curiosidad por saber, ¿cuál sería el caso de uso about:blank? No estoy seguro de si algún navegador inyecta recursos de complementos about:blank, pero parece que ese podría ser el único caso de uso.
Shef

3
Esto no funciona en absoluto si tiene una cadena de URL, ¿verdad? (es decir, necesitas estar en location esto para que funcione)
Nick T

1
Perdón por la respuesta tardía, @NickT. Sí, no hace eso. Por favor, use la buena solución provista por David para eso.
Shef

1
Esta respuesta debe elegirse como la respuesta correcta. Está limpio y utiliza el objeto de ubicación estándar.
Mohit Gangrade

14
¿No puedes usar en location.hostlugar de location.hostname+ location.port?
c24w

180

Ninguna de estas respuestas parece abordar completamente la pregunta, que requiere una url arbitraria, no específicamente la url de la página actual.

Método 1: utilice la API de URL (advertencia: no es compatible con IE11)

Puede usar la API de URL (no es compatible con IE11, pero está disponible en cualquier otro lugar ).

Esto también facilita el acceso a los parámetros de búsqueda . Otra ventaja: se puede usar en un Web Worker, ya que no depende del DOM.

const url = new URL('http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

Método 2 (antigua forma): utilice el analizador incorporado del navegador en el DOM

Use esto si lo necesita para trabajar también en navegadores antiguos.

//  Create an anchor element (note: no need to append this element to the document)
const url = document.createElement('a');
//  Set href to any path
url.setAttribute('href', 'http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');

¡Eso es!

El analizador incorporado del navegador ya ha hecho su trabajo. Ahora puede tomar las partes que necesita (tenga en cuenta que esto funciona para los dos métodos anteriores):

//  Get any piece of the url you're interested in
url.hostname;  //  'example.com'
url.port;      //  12345
url.search;    //  '?startIndex=1&pageSize=10'
url.pathname;  //  '/blog/foo/bar'
url.protocol;  //  'http:'

Bonus: Parámetros de búsqueda

Es probable que también desee separar los parámetros de URL de búsqueda, ya que '? StartIndex = 1 & pageSize = 10' no es demasiado utilizable por sí solo.

Si usó el Método 1 (API de URL) anterior, simplemente use los captadores searchParams:

url.searchParams.get('startIndex');  // '1'

O para obtener todos los parámetros:

function searchParamsToObj(searchParams) {
  const paramsMap = Array
    .from(url.searchParams)
    .reduce((params, [key, val]) => params.set(key, val), new Map());
  return Object.fromEntries(paramsMap);
}
searchParamsToObj(url.searchParams);
// -> { startIndex: '1', pageSize: '10' }

Si usó el Método 2 (a la antigua usanza), puede usar algo como esto:

// Simple object output (note: does NOT preserve duplicate keys).
var params = url.search.substr(1); // remove '?' prefix
params
    .split('&')
    .reduce((accum, keyval) => {
        const [key, val] = keyval.split('=');
        accum[key] = val;
        return accum;
    }, {});
// -> { startIndex: '1', pageSize: '10' }

link.protocol me da un "http:" si inspecciono un anker con "google.com" :-(var link = document.createElement('a'); link.setAttribute('href', 'google.com'); console.log(link.protocol)
eXe

¿Estás haciendo eso en una httppágina quizás? Si no se especifica, 'heredará' de la ubicación actual
Stijn de Witt,

44
Esta es una respuesta fantástica y debería obtener más votos, porque esta respuesta no se limita solo a la ubicación actual , sino que funciona para cualquier url , y porque esta respuesta utiliza el analizador incorporado del navegador en lugar de construir uno nosotros mismos (que no podemos Espero hacerlo tan bien o tan rápido!
Stijn de Witt

¡Gracias por este ingenioso truco! Me gustaría agregar una cosa: hay ambas hosty hostname. El primero incluye el puerto (por ejemplo localhost:3000), mientras que el segundo es solo el nombre del host (por ejemplo localhost).
codener

Esto funciona bien en caso de URL absoluta. Falla en caso de URL relativa y navegador cruzado. ¿Alguna sugerencia?
Gururaj

133

Por alguna razón, todas las respuestas son exageradas. Esto es todo lo que se necesita:

window.location.origin

Se pueden encontrar más detalles aquí: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties


19
Para su información, estoy seguro de que esto será genial en el futuro cuando todos los navegadores populares lo hayan implementado, sin embargo , este no es el caso actualmente: developer.mozilla.org/en-US/docs/Web/API/… At Al momento de escribir, solo las versiones recientes de los navegadores Firefox y WebKit admiten la propiedad de origen según mi investigación.
Zac Seth

2
Solo para completar: la ubicación se define en HTML5 e implementa la URLUtilsinterfaz que se define en WHATWG e incluye el originatributo.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

55
Hola desde 2015 ... desafortunadamente, URLUtils todavía no se implementa correctamente en todos los navegadores, de acuerdo con esta tabla de compatibilidad en MDN. Sin embargo, parece que la propiedad de origen es ligeramente mejor compatible que en 2013, todavía no es apta para la producción, ya que no está implementada correctamente en Safari. Lo siento chicos :(
totallyNotLizards

Actualización: Todavía no es compatible con muchos navegadores (safari también) :( :(
Ahmad hamza

Tampoco funciona en IE, devuelve "indefinido".
Siddhartha Chowdhury

53

Como ya se mencionó, todavía no se admite por completo, window.location.originpero en lugar de usarlo o crear una nueva variable para usar, prefiero verificarlo y si no está configurado para configurarlo.

Por ejemplo;

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

De hecho, escribí sobre esto hace unos meses. Una solución para window.location.origin


1
Esta es la primera vez que sé window.location.originque existe. Gracias. ^^
EThaizone Jo

33

anfitrión

var url = window.location.host;

devoluciones localhost:2679

nombre de host

var url = window.location.hostname;

devoluciones localhost


¡¡¡Gracias!!! No pude entender por qué localhost se mostraba como en localhost/lugar de localhost:3000.
Tyler Youngblood

23

window.location.origin será suficiente para obtener lo mismo.


1
Eso resolvió mi problema fácilmente. Gracias @intsoumen
Turker Tunali

14

La propiedad de protocolo establece o devuelve el protocolo de la URL actual, incluidos los dos puntos (:).

Esto significa que si desea obtener solo la parte HTTP / HTTPS, puede hacer algo como esto:

var protocol = window.location.protocol.replace(/:/g,'')

Para el dominio puedes usar:

var domain = window.location.hostname;

Para el puerto puedes usar:

var port = window.location.port;

Tenga en cuenta que el puerto será una cadena vacía si no está visible en la URL. Por ejemplo:

Si necesita mostrar 80/443 cuando no tiene uso de puerto

var port = window.location.port || (protocol === 'https' ? '443' : '80');

9

¿Por qué no usar:

let full = window.location.origin

3
Al agregar una respuesta a una pregunta anterior con respuestas existentes, es útil explicar qué información nueva aporta su respuesta y reconocer si el paso del tiempo impacta la respuesta.
Jason Aller

8

De hecho, window.location.origin funciona bien en los navegadores que siguen los estándares, pero adivina qué. IE no está siguiendo los estándares.

Por eso, esto es lo que funcionó para mí en IE, FireFox y Chrome:

var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');

pero para posibles mejoras futuras que podrían causar conflictos, especifiqué la referencia de "ventana" antes del objeto de "ubicación".

var full = window.location.protocol+'//'+window.location.hostname+(window.location.port ? ':'+window.location.port: '');

6

Aquí está la solución que estoy usando:

const result = `${ window.location.protocol }//${ window.location.host }`;

EDITAR:

Para agregar compatibilidad entre navegadores, use lo siguiente:

const result = `${ window.location.protocol }//${ window.location.hostname + (window.location.port ? ':' + window.location.port: '') }`;

1
Votado, pero window.location.hostpuede que no sea el mejor navegador
cruzado

1
Gracias, he agregado compatibilidad entre navegadores a mi respuesta original.
JulienRioux

3
var http = location.protocol;
var slashes = http.concat("//");
var host = slashes.concat(window.location.hostname);

3
var getBasePath = function(url) {
    var r = ('' + url).match(/^(https?:)?\/\/[^/]+/i);
    return r ? r[0] : '';
};

2
considera explicar tu respuesta. No asuma que el OP puede comprender la importancia de las diferentes partes de su código.
ADyson

3

Intente usar una expresión regular (Regex), que será bastante útil cuando desee validar / extraer cosas o incluso hacer un análisis simple en javascript.

La expresión regular es:

/([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/

Demostración:

function breakURL(url){

     matches = /([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/.exec(url);

     foo = new Array();

     if(matches){
          for( i = 1; i < matches.length ; i++){ foo.push(matches[i]); }
     }

     return foo
}

url = "https://www.google.co.uk:55699/search?q=http%3A%2F%2F&oq=http%3A%2F%2F&aqs=chrome..69i57j69i60l3j69i65l2.2342j0j4&sourceid=chrome&ie=UTF-8"


breakURL(url);       // [https, www.google.co.uk, 55699] 
breakURL();          // []
breakURL("asf");     // []
breakURL("asd://");  // []
breakURL("asd://a"); // [asd, a, undefined]

Ahora puedes hacer la validación también.


"Un esquema de URL RFC 3986 válido debe consistir en" una letra y seguido de cualquier combinación de letras, dígitos, más ("+"), punto (".") O guión ("-"). "- stackoverflow. com / a / 9142331/188833 (Aquí hay una urna: ietf: rfc: 3897 (URI) / urn: ietf: rfc: 3897 (IRI) regex para el esquema: parte de una URI / IRI en Python: github.com/dgerber /rfc3987/blob/master/rfc3987.py#L147 )
Wes Turner

2

Respuesta simple que funciona para todos los navegadores:

let origin;

if (!window.location.origin) {
  origin = window.location.protocol + "//" + window.location.hostname + 
     (window.location.port ? ':' + window.location.port: '');
}

origin = window.location.origin;

1

Estilo ES6 con parámetros configurables.

/**
 * Get the current URL from `window` context object.
 * Will return the fully qualified URL if neccessary:
 *   getCurrentBaseURL(true, false) // `http://localhost/` - `https://localhost:3000/`
 *   getCurrentBaseURL(true, true) // `http://www.example.com` - `https://www.example.com:8080`
 *   getCurrentBaseURL(false, true) // `www.example.com` - `localhost:3000`
 *
 * @param {boolean} [includeProtocol=true]
 * @param {boolean} [removeTrailingSlash=false]
 * @returns {string} The current base URL.
 */
export const getCurrentBaseURL = (includeProtocol = true, removeTrailingSlash = false) => {
  if (!window || !window.location || !window.location.hostname || !window.location.protocol) {
    console.error(
      `The getCurrentBaseURL function must be called from a context in which window object exists. Yet, window is ${window}`,
      [window, window.location, window.location.hostname, window.location.protocol],
    )
    throw new TypeError('Whole or part of window is not defined.')
  }

  const URL = `${includeProtocol ? `${window.location.protocol}//` : ''}${window.location.hostname}${
    window.location.port ? `:${window.location.port}` : ''
  }${removeTrailingSlash ? '' : '/'}`

  // console.log(`The URL is ${URL}`)

  return URL
}

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.