如何使用jQuery移除字符串中从?至末尾的内容？（路由匹配场景）

你需要匹配导航链接与当前页面URL，但要移除URL中?及之后的查询参数部分，下面是对应的jQuery实现方案：

核心思路 #

不管是导航链接的URL还是当前页面的URL，都先去除?开头的查询参数部分，再进行相等匹配，匹配成功后给链接添加aria-current="page"属性。

简单实现方案（split方法） #

这种方式适合大多数普通URL场景：

// 处理当前页面URL，截取?之前的部分
const currentCleanUrl = window.location.href.split('?')[0];

// 遍历所有.nav-link元素
$('.nav-link').each(function() {
    // 处理当前链接的URL，截取?之前的部分
    const linkCleanUrl = this.href.split('?')[0];
    
    // 对比处理后的URL，匹配则设置属性
    if (linkCleanUrl === currentCleanUrl) {
        $(this).attr('aria-current', 'page');
    }
});

更严谨的实现方案（URL对象） #

如果你的URL包含复杂路径、多域名场景，使用原生URL对象处理会更可靠，能准确提取域名和路径部分（自动忽略查询参数）：

// 解析当前页面URL，提取域名+路径
const currentUrlObj = new URL(window.location.href);
const currentCleanUrl = currentUrlObj.origin + currentUrlObj.pathname;

// 遍历导航链接
$('.nav-link').each(function() {
    const linkUrlObj = new URL(this.href);
    const linkCleanUrl = linkUrlObj.origin + linkUrlObj.pathname;
    
    if (linkCleanUrl === currentCleanUrl) {
        $(this).attr('aria-current', 'page');
    }
});

对比原生JS代码的改动点 #

• 用jQuery的$('.nav-link').each()替代原生的document.querySelectorAll('.nav-link').forEach()
• 用jQuery的.attr()方法替代原生的setAttribute()
• 核心的URL处理逻辑保持一致，只是结合jQuery的DOM操作语法进行了改写

内容的提问来源于stack exchange，提问作者Bradley Rice