如何获得“原始”效果JavaScript 中的 href 内容

发布于 2024-08-07 21:08:08 字数 455 浏览 11 评论 0原文

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

但我发现当我访问锚点的 href 属性时，它总是被标准化或烘焙成包含“http”的形式。也就是说，如果 HTML 包含：

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

访问

document.getElementById("rel").href

http://example.com/relative/link

如何访问 href 属性中的原始数据？

或者，是否有更好的方法来查找相关链接？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只是在用心讲痛 2024-08-14 21:08:08

请尝试使用 getAttribute 方法。

回复收藏 0 原文

〆凄凉。 2024-08-14 21:08:08

典型的。我在发布问题后几乎立即就自己弄清楚了。

而不是：

anchor.href

使用：

anchor.getAttribute("href")

当然，我输入这个答案所花费的时间比其他人回答它所花费的时间还要长。（该死，你们的速度太快了。）

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

回复收藏 0 原文

阳光①夏 2024-08-14 21:08:08

这是您可以运行来测试的代码片段。

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

希望对您有所帮助。

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.

回复收藏 0 原文

凉城 2024-08-14 21:08:08

获取链接 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 下的每个动态页面附加的动态链接。

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.

回复收藏 0 原文

~没有更多了~