Obter protocolo, domínio e porta do URL


301

Preciso extrair o protocolo, o domínio e a porta completos de um determinado URL. Por exemplo:

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

9
Para aqueles leitores que procuram uma resposta onde o URL não é o local atual, olhada abaixo a resposta aceita
Guy Schalnat

Respostas:


150

primeiro obtenha o endereço atual

var url = window.location.href

Então basta analisar essa string

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

seu URL é:

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

Espero que isto ajude


8
Isso funciona com seqüência de URL, onde locationobjeto não está disponível (JS navegador fora!)
Thamme Gowda

A resposta de David Calhoun usa o analisador interno (como location), mas pode ser usado para qualquer URL. Confira, é legal.
Stijn de Witt

6
Ou apenas transformá-lo em uma frase:window.location.href.split('/').slice(0, 3).join('/')
Ryan McGeary 16/05

e como você faria isso no nó?
DDD

5
window.location.origin
int soumen 30/11

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

3
@Randomblue What about it? Você receberá about://. No entanto, estou curioso para saber, qual seria o caso de uso about:blank? Não tenho certeza se algum navegador injeta recursos de plug-in about:blank, mas parece que esse pode ser o único caso de uso.
Shef

3
Isso não funciona se você tiver uma string de URL, certo? (ou seja, você precisa estar em location para este ao trabalho)
Nick T

1
Desculpe pela resposta tardia, @NickT. Sim, não faz isso. Por favor, use a boa solução fornecida por David para isso.
Shef

1
Esta resposta deve ser escolhida como a resposta correta. É limpo e usa o objeto de localização padrão.
Mohit Gangrade

14
Você não pode usar em location.hostvez de location.hostname+ location.port?
C24w

180

Nenhuma dessas respostas parece abordar completamente a pergunta, que exige um URL arbitrário, não especificamente o URL da página atual.

Método 1: usar a API da URL (ressalva: sem suporte ao IE11)

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

Isso também facilita o acesso aos parâmetros de pesquisa . Outro bônus: 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 (maneira antiga): use o analisador interno do navegador no DOM

Use isso se você precisar que ele funcione em navegadores 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 seu trabalho. Agora você pode simplesmente pegar as partes necessárias (observe que isso funciona para os dois métodos 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: pesquisar parâmetros

É provável que você também queira separar os parâmetros dos URLs de pesquisa, já que '? StartIndex = 1 & pageSize = 10' não é muito utilizável por si só.

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

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

Ou para obter todos os 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' }

Se você usou o Método 2 (da maneira antiga), pode usar algo como isto:

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

link.protocol recebe um "http:" se eu inspecionar um anker com "google.com" :-(var link = document.createElement('a'); link.setAttribute('href', 'google.com'); console.log(link.protocol)
eXe

Você está fazendo isso em uma httppágina, talvez? Se não for especificado ele vai 'herdar' a partir da localização atual
Stijn de Witt

4
Essa é uma resposta fantástica e deve receber mais votos, porque essa resposta não se limita apenas ao local atual , mas funciona para qualquer URL , e porque essa resposta utiliza o analisador interno do navegador em vez de criar um nós mesmos (o que não podemos espero fazer tão bem ou tão rápido!).
Stijn de Witt

Obrigado por este truque inteligente! Gostaria de acrescentar uma coisa: existem ambos hoste hostname. O primeiro inclui a porta (por exemplo localhost:3000), enquanto o último é apenas o nome do host (por exemplo localhost).
Codificador 31/03

Isso funciona bem em caso de URL absoluto. Falha no caso de URL relativo e entre navegadores. Alguma sugestão?
Gururaj

133

Por alguma razão, todas as respostas são todas exageradas. É 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


19
FYI, eu tenho certeza que isso vai ser grande no futuro, quando todos os navegadores populares implementaram-lo, no entanto , este não é o caso no momento: developer.mozilla.org/en-US/docs/Web/API/... No No momento em que escrevi, apenas as versões recentes dos navegadores Firefox e WebKit suportam a propriedade origin de acordo com minha pesquisa.
Zac Seth

2
Apenas para concluir: o local é definido no HTML5 e implementa a URLUtilsinterface definida no WHATWG e inclui o originatributo
Ciro Santilli escreveu

5
Olá a partir de 2015 .. infelizmente o URLUtils ainda não foi implementado corretamente em todos os navegadores, de acordo com esta tabela de compatibilidade no MDN. No entanto, parece que a propriedade de origem é um pouco melhor suportada do que em 2013, ainda não é adequada para produção , pois não foi implementada corretamente no Safari. Desculpe pessoal :(
totallyNotLizards

Atualização: Ainda não há suporte para muitos navegadores (também safari) :( :(
Ahmad hamza

Também não funciona no IE, retorna "indefinido".
Siddhartha Chowdhury

53

Como já foi mencionado, existe ainda o suporte total window.location.origin mas, em vez de usá-lo ou criar uma nova variável para uso, prefiro procurá-lo e se não estiver definido para configurá-lo.

Por exemplo;

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

Na verdade, eu escrevi sobre isso há alguns meses. Uma correção para window.location.origin


1
É a primeira vez que sei que window.location.originexiste. Obrigado. ^^
EThaizone Jo 8/17

33

hospedeiro

var url = window.location.host;

retorna localhost:2679

nome de anfitrião

var url = window.location.hostname;

retorna localhost


Obrigado!!! Eu não conseguia descobrir por que localhost estava aparecendo como em localhost/vez de localhost:3000.
Tyler Youngblood #

23

window.location.origin será suficiente para obter o mesmo.


1
Isso resolveu meu problema facilmente. Obrigado @intsoumen
Turker Tunali

14

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;

Lembre-se de que a porta será uma cadeia vazia se não estiver visível no URL. Por exemplo:

Se você precisar mostrar 80/443 quando não tiver porta, use

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

9

Por que não usar:

let full = window.location.origin

3
Ao adicionar uma resposta a uma pergunta mais antiga com as respostas existentes, é útil explicar que novas informações sua resposta traz e reconhecer se a passagem do tempo afeta a resposta.
21719 Jason Aller

8

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

Então, por isso, 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 possam causar conflitos, especifiquei a referência "window" antes do objeto "location".

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

6

Aqui está a solução que estou usando:

const result = `${ window.location.protocol }//${ window.location.host }`;

EDITAR:

Para adicionar compatibilidade entre navegadores, use o seguinte:

const result = `${ window.location.protocol }//${ window.location.hostname + (window.location.port ? ':' + window.location.port: '') }`;

1
Upvoted, mas window.location.hostpode não ser o melhor cross-browser
nathanfranke

1
Obrigado, adicionei compatibilidade entre navegadores à minha resposta original.
precisa saber é

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

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

2
considere explicar sua resposta. Não presuma que o OP possa entender o significado das diferentes partes do seu código.
ADyson 9/09/16

3

Tente usar uma expressão regular (Regex), que será bastante útil quando você deseja validar / extrair itens ou até 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 a validação também.


"Um esquema de URL RFC 3986 válido deve consistir em" uma letra e seguido por qualquer combinação de letras, dígitos, mais ("+"), ponto final (".") Ou hífen ("-"). "- stackoverflow. com / a / 9142331/188833 (Aqui está uma urna: ietf: rfc: 3897 (URI) / urn: ietf: rfc: 3897 (IRI) para o esquema: parte de um URI / IRI em Python: github.com/dgerber /rfc3987/blob/master/rfc3987.py#L147 )
Wes Turner

2

Resposta simples que funciona para todos os navegadores:

let origin;

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

origin = window.location.origin;

1

Estilo ES6 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
}

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.