Obter protocolo, domínio e porta do URL

Eu preciso extrair o protocolo completo, domínio e porta de um determinado URL. Por exemplo:

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

primeiro obter o endereço atual

 var url = window.location.href 

Então apenas analisar essa cadeia

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

seu URL é:

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

Espero que isto ajude

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

Nenhuma dessas respostas parece abordar completamente a questão, que exige uma URL arbitrária, não especificamente a URL da página atual.

Método 1: Use a API de URL (advertência: sem suporte ao IE11)

Você pode usar a API de URL (não suportada pelo IE11, mas disponível em qualquer outro lugar ).

Isso também facilita o access aos parâmetros de pesquisa . Outro bônus: ele pode ser usado em um Web Worker, pois não depende do DOM.

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

Método 2 (modo antigo): use o analisador interno do navegador no DOM

Use isso se você precisar disso para trabalhar em navegadores mais antigos também.

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

É isso aí!

O analisador interno do navegador já fez o seu trabalho. Agora você pode simplesmente pegar as partes que você precisa (note que isso funciona para ambos os methods acima):

 // 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:' 

Bônus: params de pesquisa

Provavelmente, você provavelmente desejará separar os parâmetros de URL de pesquisa, já que ‘? StartIndex = 1 & pageSize = 10’ não é muito útil por si só.

Se você usou o Método 1 (URL API) acima, basta usar os getters searchParams:

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

Ou para obter todos os parâmetros:

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

Se você usou o Método 2 (do jeito antigo), pode usar algo assim:

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

Por alguma razão, todas as respostas são exageradas. Isso é tudo o que é preciso:

 window.location.origin 

Mais detalhes podem ser encontrados aqui: https://developer.mozilla.org/en-US/docs/Web/API/window.location#Properties

Como já foi mencionado há o window.location.origin ainda não totalmente suportado, mas em vez de usá-lo ou criar uma nova variável para usar, eu prefiro verificar se ele não está configurado para defini-lo.

Por exemplo;

 if (!window.location.origin) { window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: ''); } 

Eu realmente escrevi sobre isso alguns meses atrás Uma correção para window.location.origin

hospedeiro

 var url = window.location.host; 

retorna localhost:2679

nome de anfitrião

 var url = window.location.hostname; 

retorna localhost

A propriedade protocol define ou retorna o protocolo da URL atual, incluindo os dois pontos (:).

Isso significa que, se você deseja obter apenas a parte HTTP / HTTPS, pode fazer algo assim:

 var protocol = window.location.protocol.replace(/:/g,'') 

Para o domínio, você pode usar:

 var domain = window.location.hostname; 

Para a porta, você pode usar:

 var port = window.location.port; 

Tenha em mente que a porta será uma string vazia se não estiver visível no URL. Por exemplo:

Se você precisa mostrar 80/443 quando não tem uso de porta

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

De fato, window.location.origin funciona bem em navegadores seguindo padrões, mas adivinhe. IE não está seguindo padrões.

Então, por causa disso, foi o que funcionou para mim no IE, FireFox e Chrome:

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

mas para possíveis aprimoramentos futuros que poderiam causar conflitos, eu especifiquei a referência “window” antes do 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] : ''; }; 

Tente usar uma expressão regular (Regex), que será bastante útil quando você quiser validar / extrair material ou mesmo fazer uma análise simples em javascript.

O regex é:

 /([a-zA-Z]+):\/\/([\-\w\.]+)(?:\:(\d{0,5}))?/ 

Demonstração:

 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] 

Agora você pode fazer validação também.

ES6 estilo com parâmetros configuráveis.

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