javascript - 使用 jQuery 从 href 获取 Word

Question

嘿哟，

所以我得到了一个脚本，它将正常的anchor href's转换为id href(例如:/10001-Link1 到 #Link1)。现在，只要您为要转换为 id 链接 的每个 anchor 链接重复该代码，就可以正常工作。但我想让它不那么静态。因此，脚本不应为每个 anchor 链接重复代码，而是应自动从当前anchor href中获取正确的单词，然后用其余的单词替换该单词。 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>