从 href 锚点中删除最后一个正斜杠答案

【问题标题】：Remove last forward slash from href anchor从 href 锚点中删除最后一个正斜杠
【发布时间】：2019-09-19 23:01:16
【问题描述】：

我有以下锚点情况：

<a href="https://example.com/my-account/#example/" class="anchor">...</a>

由于# 链接的斜线，上面的锚给了我一个jQuery 冲突。因为这是 PHP 生成的，所以我正在寻找一个 jQuery Javascript 解决方案来删除此锚点的 href 的最后一个字符。我该怎么做？

这个 jquery 冲突的原因是，因为我网站上的 #-links 是并且应该是 scroll-to-id 属性。所以它滚动到 id 元素。这是一项我无法更改其构建方式的功能，因此我看到的唯一解决方案是从锚点中删除最后一个 /。

【问题讨论】：

标签： jquery anchor href

【解决方案1】：

由于#-link 的斜线，上面的锚给了我一个 jQuery 冲突

我建议您解决该冲突，因为在 URL 的片段中包含 / 本身并没有错。如果它对您造成错误，那么您需要修复您的逻辑。

话虽如此，可以通过将函数传递给prop() 来执行您需要的操作，该函数使用正则表达式删除任何尾随斜杠：

$('.anchor').prop('href', function(i, href) {
  return href.replace(/\/$/, '');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<a href="https://example.com/my-account/#example/" class="anchor">...</a>

【讨论】：

感谢您的建议，我已经解释了为什么这是一个 jQuery 冲突。
.replace 给了我一个 jQuery Uncaught TypeError。
在这种情况下，我认为您没有正确复制上面的代码。你能告诉我是什么代码导致了这个错误
这是一个使用库v1.12.4的wordpress网站，你有3.3.1。
这使得这个方法调用的差异为零。无论如何，我已经用那个版本的 jQuery 更新了答案

【解决方案2】：

您可以将attr() 方法与回调一起使用，该方法在内部迭代元素，其中回调将旧值作为第二个参数，并将使用返回的值进行更新。

$('.anchor').attr('href', (_, href) => href.slice(0, -1));

$('.anchor').attr('href', (_, href) =&gt; href.slice(0, -1));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://example.com/my-account/#example/" class="anchor">...</a>

【讨论】：

.slice 给了我一个 jQuery Uncaught TypeError。
我注意到指向正确元素的错误，抱歉！它有效
@Demian：很高兴它有帮助:)

【解决方案3】：

如果您必须在 Javascript 端更改它，您可以拆分字符串，弹出最后一个元素，然后重新加入它...（假设最后一个字符总是 /，您需要如果情况并非总是如此，请进行健全性检查）。

let href = $('.anchor').prop('href').split("");
href.pop();
href = href.join("");

console.log(href);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://example.com/my-account/#example/" class="anchor">...</a>

【讨论】：