使用 jQuery 从 href 中获取 Word

Question

嘿嘿，

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

所以这里是只适用于第一个 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>

现在我已经在寻找解决这个问题的方法了。但我发现的唯一的东西是一行我无法真正理解的代码。

$('a[href^="http://stackoverflow.com"]')
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         'http://stackoverflow.com');
   });

我得到的第一部分是每个以http://stackoverflow.com 开头的href 都得到一个.each 函数。但我不知道.replace 部分的所有/ 和\ 的作用和含义。也许这根本不是解决我问题的正确方法？

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

您可以使用lookbehind assertion（应该有不错的支持）：

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>