How to get "raw" href contents in JavaScript

Question

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?

J-P, the question was a bit unclear at the beginning. At the time I posted my comment it was not clear whether he tried using the `getAttribute` method or just the `href` property. — Ionuț G. Stan, Oct 11 '09 at 15:10

score 67 · Accepted Answer · answered Oct 11 '09 at 15:07

67

Try the getAttribute method instead.

answered Oct 11 '09 at 15:07

Gumbo

643,351
109
780
844

2

Unfortunately, IE7 seems to return the fully qualified URL even with this approach. – Jørn Schou-Rode Jan 14 '10 at 21:37
2

For those interested, [this SO](https://stackoverflow.com/a/10280487/2518231) answer has more information as to why `.href` and `.getAttibute('href')` return different values on most browsers. – Matthew Herbst Jun 22 '19 at 19:27

score 38 · Answer 2 · answered Oct 11 '09 at 15:09

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.)

score 1 · Answer 3 · answered Jul 09 '19 at 01:11

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.

score -1 · Answer 4 · answered Sep 13 '22 at 13:39

Get the link dom and add attributes for same and append the actual link to same.

var hrefUrl = 'https://www.google.com/';

const link: HTMLLinkElement = dom?.createElement('link');
link.setAttribute('rel', 'canonical');
link.setAttribute('id', 'seo');
dom?.head?.appendChild(link);
dom?.getElementById('seo')?.setAttribute('href', hrefUrl);

// working

Hope this will work for dynamic links that to append for each dynamic pages under js / ts.

This does not answer the question at all. – wfaulk Nov 11 '22 at 20:14 — wfaulk, Nov 11 '22 at 20:14

How to get "raw" href contents in JavaScript

4 Answers4

Linked

Related