如何更改所有href链接为特定的URL？

Question

我想要更改主页中href=""的所有url，但是只需要更改其中一个特定的url。

例如：

<a href="mydomain.com/issues/resolve"> The issue </a>

切换到:

<a href = "mydomain.com/issues/resolve/#thecontent">The issue</a>

我需要澄清的是，有多个具有相同url的元素，我想把它们全部改变。

我已经尝试使用javascript来实现，但是没有看到任何可见的结果：

$enlaces = document.getElementsByTagName("a");

                  for (let i = 0; i < $enlaces.length; i++) {
                    $enlaces2 = $enlaces[i];

                    if ($enlaces[i].href == 'mydomain.com/issues/resolve') {
                        this.href = 'mydomain.com/issues/resolve/#thecontent';
                    }

                    console.log ($enlaces2);

                  }

- Moises Pachon

Answer 1

一个链接节点（<a>）有许多属性。 给定：

- HTML：<a href="https://www.example.com:80/this/is/the/path?foo=bar&bish=bash#myAnchor" >test link</a> - JavaScript 中 DOM 节点的成员：link 那么其中你需要关注的属性包括：

- link.href： https://www.example.com:80/this/is/the/path?foo=bar&bish=bash#testSector - link.hostname： www.example.com - link.pathname： /this/is/the/path - link.hash： myAnchor 这些和其他属性都是可读可写的。

因此从问题描述来看，你似乎想要测试链接的 a.hostname + a.pathname。如果是这样，那么下面的代码会实现你的目标：

$('a').each(function() {
    if ((this.hostname + this.pathname) == 'mydomain.com/issues/resolve') {
        this.hash = 'thecontent';
    }
});

您应该了解为什么测试.href属性没有效果。

注：

• 阅读：a.hash返回一个包含前导#的字符串。
• 写入：a.hash = "someString"不需要哈希符号。
• 在这方面，历史上不同浏览器之间存在差异，但我认为现在已经消除了（值得测试）。

- Roamer-1888

Answer 2

因为$enlaces[i].href会给你your_domain+ href的值，所以if语句中的条件不会发生。

您需要使用attr('href')来获取确切的href值，如下所示：

$enlaces = document.getElementsByTagName("a");

for (let i = 0; i < $enlaces.length; i++) {
  $enlaces2 = $enlaces[i];
  var href_DOM_value = $($enlaces[i]).attr('href');
  var href_Actual_value = $enlaces[i].href;
  console.log(href_DOM_value);
  console.log(href_Actual_value);
  
  if (href_DOM_value == 'mydomain.com/issues/resolve') {
      $($enlaces2).attr('href', 'mydomain.com/issues/resolve/#thecontent');
      console.log("changed");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="mydomain.com/issues/resolve"> The issue </a>

- Nguyễn Văn Phong

---

你好 Phong，我的目标是遍历网站首页上的所有链接（<a href = ""）并搜索特定的URL以按照我的要求进行更改，谢谢 :) - Moises Pachon

Answer 3

你把这个问题标记为jQuery问题，那我就给你一个jQuery答案：

$("a").each(function(){
if($(this).atrr("href")=="mydomain.com/issues/resolve/")
 $(this).atrr("href","mydomain.com/issues/resolve/#thecontent");
});

话虽如此，但使用 == "mydomain.com/issues/resolve/" 是一种不好的做法，因为通常 href 属性包含协议，所以我会使用 indexOf 代替。

$("a").each(function(){
if($(this).atrr("href").indexOf("mydomain.com/issues/resolve/") >= 0)
 $(this).atrr("href","mydomain.com/issues/resolve/#thecontent");
});

- Christian Pastor Cruz

Answer 4

你的解决方案问题在于“this”没有被定义。虽然它可能在更高的层次上，但它并不是由for循环设置的。你想要的更像是：

$enlaces = document.getElementsByTagName("a");

                  for (let i = 0; i < $enlaces.length; i++) {
                    $enlaces2 = $enlaces[i];

                    if ($enlaces[i].href == 'mydomain.com/issues/resolve') {
                        $enlaces[i].href = 'mydomain.com/issues/resolve/#thecontent';
                    }

                    console.log ($enlaces2);

                  }

其他的答案可能会涉及到其他的问题，比如 href 给出的是一个完整的带有协议的 URL，而不一定是相对 URL。我不确定你的示例 URL 是否有效。需要在开头加上协议或至少 //。

- Garr Godfrey