A interface URL()
Não é restrito ao refer(r)er, qualquer URL pode ser processado com a interface URL().
Veja um exemplo que exibe somente o hostname:
var urlText = "https://example.com/path/to/resource.htm?query=string";
var urlObj = new URL(urlText);
console.log(urlObj.hostname);
Aplicado ao caso da pergunta:
Note que aqui é um ótimo exemplo, pois o JS e o iframe
são executados em outro domínio, mas o referer
vem com o site principal:
var urlObj = new URL(document.referrer);
document.write(urlObj.hostname);
Documentação: https://developer.mozilla.org/en-US/docs/Web/API/URL
Visualizando outras propriedades:
var urlText = "https://name:[email protected]:8081/path/to/resource.htm?query=string#target";
var urlObj = new URL(urlText);
console.log('protocol:' + urlObj.protocol);
console.log('username:' + urlObj.username);
console.log('password:' + urlObj.password);
console.log('host: ' + urlObj.host );
console.log('hostname:' + urlObj.hostname);
console.log('port: ' + urlObj.port );
console.log('pathname:' + urlObj.pathname);
console.log('search: ' + urlObj.search );
console.log('searchParams:' + urlObj.searchParams);
console.log('hash: ' + urlObj.hash );
Fallback com DOM e tag
Uma alternativa para browsers que não tenham suporte a URL
é criar uma tag a
, populando seu href
com o endereço:
var anchor = document.createElement('a');
anchor.href = document.referrer;
De maneira similar ao URL, pode obter "pedaços" do endereço assim:
console.log('hostname:', anchor.hostname);
Documentação: https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement
Créditos ao @GuilhermeNascimento, veja mais detalhes nesta postagem:
pt.stackoverflow.com/a/387408
RegEx
Caso alguem precise de soluções para outras arquiteturas ou camadas onde não haja uma solução dedicada como o URL(), esta pesquisa pode ajudar:
Postagens contendo URL e RegEx no Stack Overflow em Português