用于将 href 相对路径匹配到当前 URL 的正则表达式

Question

我正在为没有任何服务器端功能的网站创建一个菜单。因此，我在菜单中动态突出显示当前页面的唯一方法（以及其他更改）是检查当前 URL 并将其与当前文件的路径进行比较；当它们匹配时，我添加“当前”类并更改一些其他属性的值。

问题是我的正则表达式仅匹配单个文件名的 href 值，而不是其他文件夹的相对路径。例如，如果我的菜单存储在“category”文件夹中，则 href="page.html" 将匹配“http://www.example.com/category/page.html”，但如果我使用了 href="../category/page.html" 它不匹配。如果我在 href 中使用根相对路径，也会出现同样的问题。

我当前的正则表达式是 /[^\/]+$/)[0]。整个脚本如下所示：

$(document).ready( function () { 
  var pathname = (window.location.pathname.match(/[^\/]+$/)[0]); 
  var currA = $("#nav-sub li a[href='" + pathname + "']"); 
  var treeParent = currA.closest(".tree-parent"); 
  treeParent.attr('aria-expanded', 'true'); 
  currA.parents("li").addClass("current");
  treeParent.children('a').first().attr('tabindex','0'); 
});

Answer 1

如果您在所有菜单超链接中使用根相对路径，那么您的整个情况会更容易处理。然后你可以与 window.location.pathname 进行比较。

假设这是不可能的，您可以使用 jq-uri 库来获取根相对路径来自您拥有的任何 href 的 javascript 中。它基本上是您正在寻找的正则表达式的库包装器。

要获取给定 href 的根相对路径，类似于：

var href = "../test";

var base_uri = new URI(window.location.href); 
var uri = new URI(href);
uri.resolve(base_uri).path;

要获得您想要的功能，您可以：

1. 循环遍历所有菜单锚标记
2. 将上述代码应用于 HREF 以获取根相对路径
3. 将计算出的路径与 window.location.path 进行比较
4. 当您需要时应用您的“当前”类和其他更改找到匹配的。

希望有帮助。