Question

Heyo，

所以我得到了一个script，它将正常的anchor href's变成了id hrefs（例如：/10001-Link1到#Link1）。现在，只要您为要变成anchor link的每个id link重复代码，此方法就可以正常工作。但是我想使其不那么静态。因此，脚本应该自动从当前anchor link中提取正确的单词，而不是为每个单独的anchor href重复代码，并用其余的url替换单词，然后放置{{1} }。

这是仅适用于第一个URL的代码：

$(document).ready(function() {
	$('li a').each(function(){ 
		var oldUrl = $(this).attr("href");
		var newUrl = oldUrl.replace("/10001-Link1", "#Link1");
		$(this).attr("href", newUrl);
	});
});

现在我已经寻找该问题的解决方案。但是我发现的唯一一件事是我无法真正理解的一行代码。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="/10001-Link1">Link 1</a></li>
  <li><a href="/10002-Link2">Link 2</a></li>
  <li><a href="/10003-Link3">Link 3</a></li>
  <li><a href="/10004-Link4">Link 4</a></li>
  <li><a href="/10005-Link5">Link 5</a></li>
</ul>

我得到的第一部分是每个以http://stackoverflow.com开头的href都具有一个$('a[href^="http://stackoverflow.com"]') .each(function() { this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 'http://stackoverflow.com'); });函数。但是我不知道.each部分的所有/和\的含义是什么。也许这根本不是解决我问题的正确方法？

Answer 1

您可以为此使用正则表达式。

.replace(/\/[0-9]{5}-/, "");用空字符串替换正则表达式匹配项。只需在其前面添加一个#，即可获得所需的结果。

正则表达式的工作方式如下：

\/寻找/（需要转义）。
[0-9]{5}查找5个数字。
-寻找（您从不相信）-。

$(document).ready(function() {
	$('li a').each(function(){ 
		var oldUrl = $(this).attr("href");
		var newUrl = "#" + oldUrl.replace(/\/[0-9]{5}-/, "");
		$(this).attr("href", newUrl);
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="/10001-Link1">Link 1</a></li>
  <li><a href="/10002-Link2">Link 2</a></li>
  <li><a href="/10003-Link3">Link 3</a></li>
  <li><a href="/10004-Link4">Link 4</a></li>
  <li><a href="/10005-Link5">Link 5</a></li>
</ul>

Answer 2

您可以使用后向断言（应该有不错的支持）：

var newUrl = oldUrl.match(/((?<=-)).*$/)[0]

这将检索-之后的所有内容，
那么您可以使用该变量来组成新的href。

$(document).ready(function() {
	$('li a').each(function(){ 
		var oldUrl = $(this).attr("href");
        var newUrl = '#' + oldUrl.match(/((?<=-)).*$/)[0]
		$(this).attr("href", newUrl);
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="/10001-Link1">Link 1</a></li>
  <li><a href="/10002-Link2">Link 2</a></li>
  <li><a href="/10003-Link3">Link 3</a></li>
  <li><a href="/10004-Link4">Link 4</a></li>
  <li><a href="/10005-Link5">Link 5</a></li>
</ul>

Answer 3

您可以执行以下操作：

$(document).ready(function () {
    $('li a').each(function () {
        var url = this.href;
        url = url.split('-')[1];
        this.href = this.href.replace(this.href, "#" + url);
    });
});

Answer 4

您可以使用regular expression /\/\d{0,5}-(.*)$/进行操作，这意味着：从/，5位数字和-到字符串的末尾。 >

代码：

$('li a').each(function () {
  this.href = '#' + this.href.match(/\/\d{0,5}-(.*)$/).pop();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="/10001-Link1">Link 1</a></li>
  <li><a href="/10002-Link2">Link 2</a></li>
  <li><a href="/10003-Link3">Link 3</a></li>
  <li><a href="/10004-Link4">Link 4</a></li>
  <li><a href="/10005-Link5">Link 5</a></li>
</ul>

使用jQuery从href获取Word

4 个答案: