Devo estrarre il protocollo, il dominio e la porta completi da un determinato URL. Per esempio:
https://localhost:8181/ContactUs-1.0/contact?lang=it&report_type=consumer
>>>
https://localhost:8181
Devo estrarre il protocollo, il dominio e la porta completi da un determinato URL. Per esempio:
https://localhost:8181/ContactUs-1.0/contact?lang=it&report_type=consumer
>>>
https://localhost:8181
Risposte:
prima ottenere l'indirizzo attuale
var url = window.location.href
Quindi analizza quella stringa
var arr = url.split("/");
il tuo indirizzo è:
var result = arr[0] + "//" + arr[2]
Spero che questo ti aiuti
location
oggetto non è disponibile (js fuori dal browser!)
location
) ma può essere utilizzato per qualsiasi URL. Dai un'occhiata è pulito.
window.location.href.split('/').slice(0, 3).join('/')
var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
about://
. Tuttavia, sono curioso di sapere, a che cosa servirà about:blank
? Non sono sicuro se un browser inietti risorse del plug-in about:blank
, ma sembra che potrebbe essere l'unico caso d'uso.
location
per questo al lavoro)
location.host
invece di location.hostname
+ location.port
?
Nessuna di queste risposte sembra rispondere completamente alla domanda, che richiede un URL arbitrario, non specificamente l'URL della pagina corrente.
Puoi utilizzare l' API URL (non supportata da IE11, ma disponibile ovunque ).
Ciò semplifica anche l'accesso ai parametri di ricerca . Un altro vantaggio: può essere utilizzato in un Web Worker poiché non dipende dal DOM.
const url = new URL('http://example.com:12345/blog/foo/bar?startIndex=1&pageSize=10');
Usa questo se ne hai bisogno per funzionare anche su browser meno recenti.
// 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');
Il parser integrato nel browser ha già fatto il suo lavoro. Ora puoi semplicemente prendere le parti di cui hai bisogno (nota che funziona per entrambi i metodi sopra):
// 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:'
È probabile che probabilmente vorrai spezzare anche i parametri dell'URL di ricerca, poiché '? StartIndex = 1 & pageSize = 10' non è troppo utilizzabile da solo.
Se hai usato il Metodo 1 (API URL) sopra, devi semplicemente usare i getter searchParams:
url.searchParams.get('startIndex'); // '1'
O per ottenere tutti i parametri:
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' }
Se hai usato il Metodo 2 (alla vecchia maniera), puoi usare qualcosa del genere:
// 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
pagina forse? Se non specificato, verrà ereditato dalla posizione corrente
host
e hostname
. Il primo include la porta (ad es. localhost:3000
), Mentre il secondo è solo il nome dell'host (ad es localhost
.).
Per qualche motivo tutte le risposte sono tutte eccessive. Questo è tutto ciò che serve:
window.location.origin
Maggiori dettagli sono disponibili qui: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties
URLUtils
interfaccia definita su WHATWG e include l' origin
attributo.
Come già accennato, non esiste ancora il supporto completo, window.location.origin
ma invece di usarlo o creare una nuova variabile da usare, preferisco controllarlo e se non è impostato per impostarlo.
Per esempio;
if (!window.location.origin) {
window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}
In realtà ne ho scritto qualche mese fa Una correzione per window.location.origin
window.location.origin
esiste. Grazie. ^^
ospite
var url = window.location.host;
ritorna localhost:2679
Nome host
var url = window.location.hostname;
ritorna localhost
localhost/
posto di localhost:3000
.
window.location.origin
sarà abbastanza per ottenere lo stesso.
La proprietà protocol imposta o restituisce il protocollo dell'URL corrente, inclusi i due punti (:).
Questo significa che se vuoi ottenere solo la parte HTTP / HTTPS puoi fare qualcosa del genere:
var protocol = window.location.protocol.replace(/:/g,'')
Per il dominio puoi usare:
var domain = window.location.hostname;
Per la porta puoi usare:
var port = window.location.port;
Tieni presente che la porta sarà una stringa vuota se non è visibile nell'URL. Per esempio:
Se è necessario mostrare 80/443 quando non si dispone della porta
var port = window.location.port || (protocol === 'https' ? '443' : '80');
Perché non usare:
let full = window.location.origin
In effetti, window.location.origin funziona bene nei browser seguendo gli standard, ma indovina un po '. IE non segue gli standard.
Quindi a causa di ciò, questo è ciò che ha funzionato per me in IE, FireFox e Chrome:
var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
ma per possibili miglioramenti futuri che potrebbero causare conflitti, ho specificato il riferimento "finestra" prima dell'oggetto "posizione".
var full = window.location.protocol+'//'+window.location.hostname+(window.location.port ? ':'+window.location.port: '');
Ecco la soluzione che sto usando:
const result = `${ window.location.protocol }//${ window.location.host }`;
MODIFICARE:
Per aggiungere la compatibilità tra browser, utilizzare quanto segue:
const result = `${ window.location.protocol }//${ window.location.hostname + (window.location.port ? ':' + window.location.port: '') }`;
window.location.host
potrebbe non essere il miglior cross-browser
var http = location.protocol;
var slashes = http.concat("//");
var host = slashes.concat(window.location.hostname);
Prova a usare un'espressione regolare (Regex), che sarà molto utile quando vuoi convalidare / estrarre cose o anche fare qualche semplice analisi in javascript.
Il regex è:
/([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/
Dimostrazione:
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]
Ora puoi anche fare la validazione.
Risposta semplice che funziona per tutti i browser:
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
}