64

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?

4
  • 9
    Have you tried element.getAttribute("href")? Commented Oct 11, 2009 at 15:06
  • @Ionut, why'd you not add that as an answer?
    – James
    Commented Oct 11, 2009 at 15:09
  • 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. Commented Oct 11, 2009 at 15:10
  • Yeah, I spazzed out on the code. Sorry, Ionut.
    – wfaulk
    Commented Oct 11, 2009 at 15:11

4 Answers 4

67

Try the getAttribute method instead.

2
  • 2
    Unfortunately, IE7 seems to return the fully qualified URL even with this approach. Commented Jan 14, 2010 at 21:37
  • 2
    For those interested, this SO answer has more information as to why .href and .getAttibute('href') return different values on most browsers. Commented Jun 22, 2019 at 19:27
38

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

1

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.

-1

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.

1
  • This does not answer the question at all.
    – wfaulk
    Commented Nov 11, 2022 at 20:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.