在不解析 URL 的情况下获取 HTML 中的 href 值答案

【问题标题】：Getting href value in HTML without resolution of URL在不解析 URL 的情况下获取 HTML 中的 href 值
【发布时间】：2020-09-13 16:46:42
【问题描述】：

我有一个使用脚本生成的静态 HTML。

我在 HTML 中的超链接如下所示：

<a href="corners/xyz.csv">Data</a>

他们的角落目录存在于 HTML 所在的同一目录中。当我使用我的浏览器打开它时，浏览器解析的 URL 类似于：

/home/user/blah/blah1/corners/xyz.csv

我想在我的 javascript 函数的某些部分使用 href 值。当我执行getElementsByTagName("a")[0] 时，我会得到整个解析的 URL。

但是，我想要的只是corners/xyz.csv

有没有办法在不解析的情况下获取 href 标记中存在的文本？

【问题讨论】：

【解决方案1】：

使用Element.getAttribute()函数获取href属性的值。该函数返回指定属性的值。

getElementsByTagName("a")[0].getAttribute('href')

console.log(document.getElementsByTagName("a")[0].href)
console.log(document.getElementsByTagName("a")[0].getAttribute('href'))

&lt;a href="corners/xyz.csv"&gt;Data&lt;/a&gt;

【讨论】：

【解决方案2】：

读取属性，而不是属性

var anchor = document.querySelector("a")
console.log(anchor.getAttribute('href'))

&lt;a href="foo/bar.baz"&gt;&lt;/a&gt;

【讨论】：

【解决方案3】：

document.getElementsByTagName("a")[0].getAttribute("href");

【讨论】：

【解决方案4】：

document.getElementsByTagName("a")[0].getAtrribute("href") 应该可以解决问题。

【讨论】：

【解决方案5】：

pathname 是您要查找的属性，

console.log(document.querySelector('a').pathname);

&lt;a href="corners/xyz.csv"&gt;Data&lt;/a&gt;

【讨论】：

【解决方案6】：

根据this answer，我发现该属性解析为绝对 URL，而属性仍然是您想要的字符串值。在您的情况下（因为您正在获取所有 a 标签），您需要映射它们。

let rawHrefs = [...document.getElementsByTag('a')]
  .map(el => el.getAttribute('href'));

【讨论】：