如何在JavaScript中获取“原始”href内容

Question

我正在尝试编写一个GreaseMonkey脚本，其中我想找到所有相对链接。我认为做法是将href的内容与/^https?:///匹配。

但我发现当我访问锚点的href属性时，它总是被规范化或转换成包含"http"的形式。也就是说，如果HTML包含：

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

访问

document.getElementById("rel").href

返回

http://example.com/relative/link

我怎样才能访问href属性中的原始数据？

或者，有更好的方法来查找相对链接吗？

- wfaulk

---

你尝试过使用 element.getAttribute("href") 吗？ - Ionuț G. Stan

@Ionut，你为什么没有把那个作为答案添加进去？ - James

J-P，一开始问题有点不清楚。在我发表评论的时候，还不清楚他是否尝试使用getAttribute方法或只是href属性。 - Ionuț G. Stan

对不起，我在代码上有点失控了。抱歉，Ionut。 - wfaulk

Answer 1

试试使用getAttribute方法代替。

- Gumbo

---

不幸的是，即使使用这种方法，IE7似乎仍会返回完全限定的URL。 - Jørn Schou-Rode

对于那些感兴趣的人，这篇SO回答提供了更多信息，解释了为什么在大多数浏览器上.href和.getAttribute('href')返回不同的值。 - Matthew Herbst

Answer 2

典型的情况。我发布问题后几乎立即自己解决了它。

而不是：

anchor.href

用法：

anchor.getAttribute("href")

当然，我花在回答这个问题上的时间比其他人都要长。 （该死，你们这些人真快。）

- wfaulk

Answer 3

这里是一个代码片段，您可以运行它进行测试。

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

假设你正在访问 http://localhost:4200，并且这是你在问题中展示的文档。

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

这个锚点的属性值 href 是：

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

锚点的href值为：

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

我希望它能有所帮助。

- Alan Dong

Answer 4

获取链接的DOM并为其添加属性，然后将实际链接附加到其中。

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

希望这对于在JS/TS下为每个动态页面附加动态链接起作用。

- Basavaraj SK

---

这完全没有回答问题。 - wfaulk