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
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
Respuestas:
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
location
objeto no está disponible (¡fuera del navegador!)
location
) pero puede usarse para cualquier url. Compruébalo, está ordenado.
window.location.href.split('/').slice(0, 3).join('/')
var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
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.
location
esto para que funcione)
location.host
lugar de location.hostname
+ 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.
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');
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');
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:'
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' }
var link = document.createElement('a'); link.setAttribute('href', 'google.com'); console.log(link.protocol)
http
página quizás? Si no se especifica, 'heredará' de la ubicación actual
host
y hostname
. El primero incluye el puerto (por ejemplo localhost:3000
), mientras que el segundo es solo el nombre del host (por ejemplo localhost
).
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
URLUtils
interfaz que se define en WHATWG e incluye el origin
atributo.
Como ya se mencionó, todavía no se admite por completo, window.location.origin
pero 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
window.location.origin
que existe. Gracias. ^^
anfitrión
var url = window.location.host;
devoluciones localhost:2679
nombre de host
var url = window.location.hostname;
devoluciones localhost
localhost/
lugar de localhost:3000
.
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:
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: '') }`;
window.location.host
puede que no sea el mejor navegador
var http = location.protocol;
var slashes = http.concat("//");
var host = slashes.concat(window.location.hostname);
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;
/**
* 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
}