How to get “raw” href contents in JavaScript

问题

I am trying to write a GreaseMonkey script in which I want to find all of the links that are relative links. It seemed to me that the way to do that would be to match the contents of href against /^https?:///.

But I find that when I access the anchor\'s href attribute, it\'s always normalized or cooked into a form that contains \"http\". That is, if the HTML contains:

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

accessing

document.getElementById(\"rel\").href

returns

http://example.com/relative/link

How can I access the raw data in the href attribute?

Alternately, is there a better way to find relative links?

回答1:

Try the getAttribute method instead.

回答2:

Typical. I figured it out myself almost immediately after posting the question.

instead of:

anchor.href

use:

anchor.getAttribute("href")

Of course, it took me longer to type in this answer than it took everyone else to answer it. (Damn, you people are fast.)

回答3:

Here's a code snippet you could run to test.

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);
}

Let's say, you are at http://localhost:4200, and this is your document as you have shown in the question.

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

This anchor's attribute value of href is:

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

And anchor's href value is:

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

I hope it helps.

来源：https://stackoverflow.com/questions/1550901/how-to-get-raw-href-contents-in-javascript

标签

javascript

anchor

href

relative-url