Obtener protocolo, dominio y puerto de URL

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

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

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

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' }

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

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

anfitrión

var url = window.location.host;

devoluciones localhost:2679

nombre de host

var url = window.location.hostname;

devoluciones localhost

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

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:

• http://example.com/ devolverá "" para el puerto
• http://example.com:80/ devolverá 80 para el puerto

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

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

¿Por qué no usar:

let full = window.location.origin

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: '');

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

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

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

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.

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;

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
}

window.location.protocol + '//' + window.location.host