在沒有 URL 分辨率的情況下獲取 HTML 中的 href 值

Question

我有一個使用腳本生成的 static HTML。

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

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

他們的角落目錄存在於 HTML 所在的同一目錄中。 當我使用瀏覽器打開它時，瀏覽器會解析 URL ，它變成如下所示：

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

我想在我的 javascript function 的某些部分使用 href 值。 當我執行getElementsByTagName("a")[0]時，我得到了整個解析的 URL。

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

有沒有辦法在不解析的情況下獲取 href 標記中存在的文本？

Answer 1

讀取屬性，而不是屬性

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

 <a href="foo/bar.baz"></a>

Answer 2

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

Answer 3

document.getElementsByTagName("a")[0].getAtrribute("href")應該可以解決問題。

Answer 4

pathname是您要查找的屬性，

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

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

Answer 5

使用Element.getAttribute() function 獲取href屬性的值。 這個 function 返回指定屬性的值。

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

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

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

Answer 6

根據這個答案，我發現屬性解析為絕對 URL 而屬性仍然是您想要的字符串值。 在您的情況下（因為您正在獲取所有a標簽），您可能希望對它們進行 map。

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