如何在JavaScript中删除查询字符串参数？

Question

除了使用正则表达式之外,是否有更好的方法从标准Ja​​vaScript中的URL字符串中的查询字符串中删除参数？

这是我到目前为止所提出的,似乎在我的测试中有效,但我不喜欢重新发明查询字符串解析!

function RemoveParameterFromUrl( url, parameter ) {

    if( typeof parameter == "undefined" || parameter == null || parameter == "" ) throw new Error( "parameter is required" );

    url = url.replace( new RegExp( "\\b" + parameter + "=[^&;]+[&;]?", "gi" ), "" ); "$1" );

    // remove any leftover crud
    url = url.replace( /[&;]$/, "" );

    return url;
}

Answer 1

"[&;]?" + parameter + "=[^&;]+"

似乎很危险,因为参数'bar'会匹配:

?a=b&foobar=c

此外,如果parameter包含RegExp中特殊的任何字符,例如"." ,它将失败.并且它不是全局正则表达式,因此它只会删除参数的一个实例.

我不会使用简单的RegExp,我会解析参数并丢失你不想要的参数.

function removeURLParameter(url, parameter) {
    //prefer to use l.search if you have a location/link object
    var urlparts = url.split('?');   
    if (urlparts.length >= 2) {

        var prefix = encodeURIComponent(parameter) + '=';
        var pars = urlparts[1].split(/[&;]/g);

        //reverse iteration as may be destructive
        for (var i = pars.length; i-- > 0;) {    
            //idiom for string.startsWith
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {  
                pars.splice(i, 1);
            }
        }

        return urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : '');
    }
    return url;
}

Answer 2

从bobince回复复制,但使其支持查询字符串中的问号,例如

http://www.google.com/search?q=test???+something&aq=f

在URL中有多个问号是否有效？

function removeUrlParameter(url, parameter) {
  var urlParts = url.split('?');

  if (urlParts.length >= 2) {
    // Get first part, and remove from array
    var urlBase = urlParts.shift();

    // Join it back up
    var queryString = urlParts.join('?');

    var prefix = encodeURIComponent(parameter) + '=';
    var parts = queryString.split(/[&;]/g);

    // Reverse iteration as may be destructive
    for (var i = parts.length; i-- > 0; ) {
      // Idiom for string.startsWith
      if (parts[i].lastIndexOf(prefix, 0) !== -1) {
        parts.splice(i, 1);
      }
    }

    url = urlBase + '?' + parts.join('&');
  }

  return url;
}

Answer 3

现代浏览器提供URLSearchParams了与搜索参数一起使用的界面.哪个delete方法可以按名称删除param.

if (typeof URLSearchParams !== 'undefined') {
  const params = new URLSearchParams('param1=1&param2=2&param3=3')
  
  console.log(params.toString())
  
  params.delete('param2')
  
  console.log(params.toString())

} else {
  console.log(`Your browser ${navigator.appVersion} does not support URLSearchParams`)
}

Answer 4

我没有看到正则表达式解决方案的主要问题.但是,不要忘记保留片段标识符(后面的文本#).

这是我的解决方案:

function RemoveParameterFromUrl(url, parameter) {
  return url
    .replace(new RegExp('[?&]' + parameter + '=[^&#]*(#.*)?$'), '$1')
    .replace(new RegExp('([?&])' + parameter + '=[^&]*&'), '$1');
}

对于bobince的观点,是的 - 您需要.在参数名称中转义字符.

Answer 5

任何对正则表达式解决方案感兴趣的人都把这个函数放在一起来添加/删除/更新查询字符串参数.不提供值将删除参数,提供一个将添加/更新参数.如果没有提供URL,它将从window.location中获取.该解决方案还考虑了url的锚点.

function UpdateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
        hash;

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null)
            return url.replace(re, '$1' + key + "=" + value + '$2$3');
        else {
            hash = url.split('#');
            url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) 
                url += '#' + hash[1];
            return url;
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = url.indexOf('?') !== -1 ? '&' : '?';
            hash = url.split('#');
            url = hash[0] + separator + key + '=' + value;
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) 
                url += '#' + hash[1];
            return url;
        }
        else
            return url;
    }
}

UPDATE

删除查询字符串中的第一个参数时出现错误,我重新编写了正则表达式并测试了包含修复.

更新2

@schellmax更新以修复在hashtag之前直接删除querystring变量时hashtag符号丢失的情况

Answer 6

如果它是 的实例URL，请使用的delete功能searchParams

let url = new URL(location.href);
url.searchParams.delete('page');

Answer 7

您可以使用以下方法更改URL：

window.history.pushState({}, document.title, window.location.pathname);

这样，您可以不使用搜索参数覆盖URL，在使用GET参数后，我用它来清理URL。

Answer 8

假设您要从URI中删除key = val参数:

function removeParam(uri) {
   return uri.replace(/([&\?]key=val*$|key=val&|[?&]key=val(?=#))/, '');
}

Answer 9

继承人一个完整的功能，用于基于此问题和此github gist添加和删除参数：https : //gist.github.com/excalq/2961415

var updateQueryStringParam = function (key, value) {

    var baseUrl = [location.protocol, '//', location.host, location.pathname].join(''),
        urlQueryString = document.location.search,
        newParam = key + '=' + value,
        params = '?' + newParam;

    // If the "search" string exists, then build params from it
    if (urlQueryString) {

        updateRegex = new RegExp('([\?&])' + key + '[^&]*');
        removeRegex = new RegExp('([\?&])' + key + '=[^&;]+[&;]?');

        if( typeof value == 'undefined' || value == null || value == '' ) { // Remove param if value is empty

            params = urlQueryString.replace(removeRegex, "$1");
            params = params.replace( /[&;]$/, "" );

        } else if (urlQueryString.match(updateRegex) !== null) { // If param exists already, update it

            params = urlQueryString.replace(updateRegex, "$1" + newParam);

        } else { // Otherwise, add it to end of query string

            params = urlQueryString + '&' + newParam;

        }

    }
    window.history.replaceState({}, "", baseUrl + params);
};

您可以添加如下参数：

updateQueryStringParam( 'myparam', 'true' );

然后像这样删除它：

updateQueryStringParam( 'myparam', null );

在这个线程中，许多人说正则表达式可能不是最好的/稳定的解决方案...因此，我不能100％确定该东西是否存在某些缺陷，但据我测试，它工作得很好。

Answer 10

这是我正在使用的：

if (location.href.includes('?')) { 
    history.pushState({}, null, location.href.split('?')[0]); 
}

原始网址：http
: //www.example.com/test/hello?id = 123&foo = bar目标网址：http : //www.example.com/test/hello

Answer 11

这是当今浏览器的带有URL 类的干净版本删除查询参数：

function removeUrlParameter(url, paramKey)
{
  var r = new URL(url);
  r.searchParams.delete(paramKey);
  return r.href;
}

旧浏览器不支持 URLSearchParams

https://caniuse.com/#feat=urlsearchparams

IE、Edge（低于 17）和 Safari（低于 10.3）不支持 URL 类中的 URLSearchParams。

填充物

URLSearchParams 仅 polyfill

https://github.com/WebReflection/url-search-params

完整的 Polyfill URL 和 URLSearchParams 以匹配最新的 WHATWG 规范

https://github.com/lifaon74/url-polyfill

Answer 12

这里有一个解决方案：

1. 使用URLSearchParams（不难理解正则表达式）
2. 无需重新加载即可更新搜索栏中的 URL
3. 维护URL 的所有其他部分（例如哈希）
4. ?如果删除了最后一个参数，则删除查询字符串中的多余内容

function removeParam(paramName) {
    let searchParams = new URLSearchParams(window.location.search);
    searchParams.delete(paramName);
    if (history.replaceState) {
        let searchString = searchParams.toString().length > 0 ? '?' + searchParams.toString() : '';
        let newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname +  searchString + window.location.hash;
        history.replaceState(null, '', newUrl);
    }
}

注意：正如其他答案中所指出的， IE 不支持URLSearchParams ，因此请使用polyfill。