Javascript 如何在jQuery中将URL与href匹配？

使用列表进行导航，如果页面URL（减去路径后的任何内容）与列表项的href（减去路径后的任何内容）匹配，我正在寻找一种干净的方法将“selected”类应用于列表项

例如：

<li><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>

我尝试了window.location的变体，包括：

window.location.href

，

window.location.href.pathname

，

window.location.href.indexOf

，

window.location.href.startsWith

。由于这不起作用，我搜索了一种方法来匹配URL和href的路径，而不考虑其他参数或变量，但我所能找到的只是将URL和href特别与字符串或参数匹配的方法。我能找到的所有只匹配URL或href的一部分的实例都使用“split”RegEx，这引入了我认为我的使用不需要的另一个复杂级别。我缺少一个更简单的解决方案吗？

您可以使用

indexOf（）

示例

var url=”http://www.website.com/index/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris";
$（文档）.ready（函数（）{
$（'.leftNav li a'）。每个（函数（）{
var thishhref=（$（this.attr（'href'）.split（'？'））[0]；
//警报（thisref）；
如果（url.indexOf（thisref）>-1）{
$（this）.closest（'li'）.addClass（'selected'）；
}
});
});
。已选定{
背景：红色；
}




您可以使用
indexOf（）

示例


var url=”http://www.website.com/index/p/clothing/bottoms/capris/N-10764?ab=leftNav:capris";
$（文档）.ready（函数（）{
$（'.leftNav li a'）。每个（函数（）{
var thishhref=（$（this.attr（'href'）.split（'？'））[0]；
//警报（thisref）；
如果（url.indexOf（thisref）>-1）{
$（this）.closest（'li'）.addClass（'selected'）；
}
});
});
。已选定{
背景：红色；
}




假设实际路径中没有任何“？”字符，您可以对位置和href使用类似的内容：

function getBaseURL(url) {
    return url.split('?')[0];
}

假设实际路径中没有任何“？”字符，您可以对位置和href使用类似的字符：

function getBaseURL(url) {
    return url.split('?')[0];
}

我想如果你保持你的html格式

<li><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>

你会得到你需要的

上面的“如果”将检查给定路径是否包含在项目的href属性中

因此，如果您的URL为“”，则应该找到它的路径（/p/clothing/dresses/N-10635），并且给定示例的输出为：

<li class="selected"><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>



我希望这有帮助！=）
 我想如果你像

<li><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>

你会得到你需要的

上面的“如果”将检查给定路径是否包含在项目的href属性中

因此，如果您的URL为“”，则应该找到它的路径（/p/clothing/dresses/N-10635），并且给定示例的输出为：

<li class="selected"><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>



我希望这有帮助！=）
 我想做==0而不是>-1，但您的解决方案确实回答了这个问题。这似乎只与我在OP中的第一次尝试相同，它只匹配整个URL。导航到/p/clothing/dresses/N-10635？ab=leftNav:dresses会将类添加到列表项中，但导航到URL的任何其他变体，例如没有？ab=leftNav:dresses的/p/clothing/dresses/N-10635不会触发匹配。聪明的方法。我认为从
ThisHref
中去掉“？”之后的所有内容会使它起作用。@Mohamed Yousef更新的示例确实起作用，但我认为.split是一个正则表达式？是否对我需要匹配的少量href使用RegEx overkill？@paulmz阅读**I'd do==0而不是>-1，但您的解决方案确实回答了这个问题。这似乎与我在OP中的第一次尝试相同，它只匹配整个URL。导航到/p/clothing/dresses/N-10635？ab=leftNav:dresses会将类添加到列表项中，但导航到URL的任何其他变体，例如没有？ab=leftNav:dresses的/p/clothing/dresses/N-10635不会触发匹配。聪明的方法。我认为从
ThisHref
中去掉“？”之后的所有内容会使它起作用。@Mohamed Yousef更新的示例确实起作用，但我认为.split是一个正则表达式？是否对我需要匹配的少量href使用RegEx overkill？@paulmz阅读**请解释下票数以帮助我们改进。谢谢，我也一样。。有人否决了我的答案我不知道为什么。。不管怎样..@paulmz我用示例更新我的代码。。检查一下Mohamed Yousef和Vinas的答案是否正确。我只想和他们一起工作一天，然后再做出正确的回答。谢谢我还在测试Mohamed Yousef和Vinas的答案。使用这两种版本，我都没有看到任何负面影响。由于性能和输出看起来是相同的，我倾向于Vinas的答案，因为这是一行更少的代码。但是，如果有人能描述为什么一个版本可能比另一个版本更有益，我愿意在给出正确答案之前接受建议。请解释下投票结果，以帮助我们改进。谢谢，我也一样。。有人否决了我的答案我不知道为什么。。不管怎样..@paulmz我用示例更新我的代码。。检查一下Mohamed Yousef和Vinas的答案是否正确。我只想和他们一起工作一天，然后再做出正确的回答。谢谢我还在测试Mohamed Yousef和Vinas的答案。使用这两种版本，我都没有看到任何负面影响。由于性能和输出看起来是相同的，我倾向于Vinas的答案，因为这是一行更少的代码。但是，如果有人能描述为什么一个版本可能比另一个版本更有益，我愿意在给出正确答案之前接受建议。这似乎也可行。虽然我不明白
<li class="selected"><a href="/p/clothing/dresses/N-10635?ab=leftNav:dresses">dresses</a></li>