Ottieni protocollo, dominio e porta dall’URL

Ho bisogno di estrarre il protocollo completo, il dominio e la porta da un dato URL. Per esempio:

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

per prima cosa prendi l’indirizzo corrente

 var url = window.location.href 

Quindi basta analizzare quella stringa

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

il tuo URL è:

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

Spero che questo ti aiuti

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

Nessuna di queste risposte sembra rispondere completamente alla domanda, che richiede un url arbitrario, non specificamente l’url della pagina corrente.

Metodo 1: utilizzare l’API URL (avvertenza: nessun supporto IE11)

Puoi utilizzare l’ API dell’URL (non supportato da IE11, ma disponibile ovunque ).

Ciò facilita 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'); 

Metodo 2 (vecchio modo): utilizzare il parser integrato nel DOM del browser

Usalo se ti serve per funzionare anche con i browser più vecchi.

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

Questo è tutto!

Il parser integrato nel browser ha già fatto il suo lavoro. Ora puoi semplicemente prendere le parti che ti servono (nota che questo 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:' 

Bonus: parametri di ricerca

Probabilmente vorrai spezzare anche i parametri url di ricerca, dato che ‘? StartIndex = 1 & pageSize = 10’ non è troppo utilizzabile da solo.

Se in precedenza hai utilizzato il Metodo 1 (URL API), devi semplicemente utilizzare i getter searchParams:

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

O per ottenere tutti i parametri:

 Array.from(url.searchParams).reduce((accum, [key, val]) => { accum[key] = val; return accum; }, {}); // -> { 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 parms = 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' } 

Per qualche ragione tutte le risposte sono tutti overkill. Questo è tutto ciò che serve:

 window.location.origin 

Maggiori dettagli possono essere trovati qui: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties

Come è già stato detto, c’è ancora il file window.location.origin non ancora completamente supportato, 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à ho scritto su questo alcuni mesi indietro Una correzione per window.location.origin

ospite

 var url = window.location.host; 

restituisce localhost:2679

hostname

 var url = window.location.hostname; 

restituisce localhost

La proprietà del protocollo 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 usa la porta

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

Infatti, window.location.origin funziona bene con i browser che seguono gli standard, ma indovina cosa. IE non sta seguendo 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 alla “finestra” prima dell’object “location”.

 var full = 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] : ''; }; 

Prova ad usare un’espressione regolare (Regex), che sarà molto utile quando vuoi validare / estrarre cose o anche fare un semplice parsing in javascript.

La 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 fare anche la validazione.

Stile ES6 con parametri configurabili.

 /** * 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 }