Como obter o conteúdo de Href "Raw" em JavaScript

Question

Estou tentando escrever um script Greasemonkey no qual quero encontrar todos os links que são links relativos. Parecia -me que a maneira de fazer isso seria corresponder ao conteúdo de href contra /^https?:///.

Mas acho que quando acesse o atributo href da âncora, ele sempre é normalizado ou cozido em um formulário que contém "http". Isto é, se o HTML contiver:

<a id="rel" href="/relative/link">inner</a>

Acessando

document.getElementById("rel").href

retorna

http://example.com/relative/link

Como posso acessar os dados brutos no atributo href?

Como alternativa, existe uma maneira melhor de encontrar links relativos?

Answer 1

Tente o getAttribute método em vez de.

Answer 2

Típica. Eu descobri -me quase imediatamente depois de postar a pergunta.

ao invés de:

anchor.href

usar:

anchor.getAttribute("href")

Obviamente, levei mais tempo para digitar essa resposta do que todos os outros levaram a responder. (Droga, vocês são rápidos.)

Answer 3

Aqui está um trecho de código que você pode executar para testar.

const anchors = document.getElementsByTagName('a');

for (let anchor of anchors) {
  let hrefFullPath = anchor.href;
  let hrefRelativePath = anchor.attributes.href.value;

  console.log('hrefFullPath', hrefFullPath);
  console.log('hrefRelativePath', hrefRelativePath);
}

Digamos que você está em http://localhost:4200, e este é o seu documento, como você mostrou na pergunta.

<a id="rel" href="/relative/link">inner</a>

O valor de atributo desta âncora de href é:

document.getElementById('rel').attributes.href.value => /relative/link

E âncora href O valor é:

document.getElementById('rel').href =>  http://localhost:4200/relative/link

Espero que ajude.