javascript - parametros - Obtener protocolo, dominio y puerto desde URL

obtener ruta absoluta javascript

Question

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

Answer 1

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 se puede utilizar:

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

Answer 2

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
}

Answer 3

Como ya se ha mencionado, existe el window.location.origin que aún no está totalmente soportado, pero en lugar de usarlo o crear una nueva variable para usar, prefiero verificarlo y no configurarla 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

Answer 4

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

Por eso, esto es lo que me funcionó 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 "ubicación".

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

Answer 5

Intente usar una expresión regular (Regex), que será muy útil cuando quiera 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.

Answer 6

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

window.location.origin

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

Answer 7

primero obtén la dirección actual

var url = window.location.href

Entonces simplemente analiza esa cadena

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

tu url es

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

Espero que esto ayude

Answer 8

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

Answer 9

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: use la API de URL (advertencia: no es compatible con IE11)

Puede utilizar 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 utilizar en un trabajador web, ya que no depende del DOM.

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

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

Use esto si necesita que esto funcione 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 solo puede tomar las partes que necesita (tenga en cuenta que esto funciona con 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

Lo más probable es que también querrá separar los parámetros de la URL de búsqueda, ya que ''? StartIndex = 1 & pageSize = 10'' no es muy útil por sí solo.

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

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

O para obtener todos los parámetros:

Array.from(url.searchParams).reduce((accum, [key, val]) => {
accum[key] = val;
return accum;
}, {});
// -> { startIndex: ''1'', pageSize: ''10'' }

Si usaste el Método 2 (la forma antigua), puedes 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'' }

Answer 10

anfitrión

var url = window.location.host;

devuelve localhost:2679

nombre de host

var url = window.location.hostname;

devuelve localhost

Answer 11

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

Answer 12

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

Answer 13

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