如何在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

Is it valid to have more than one question mark in a 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

我没有看到正则表达式解决方案的主要问题。但是，不要忘记保留片段标识符（#之后的文本）。

这是我的解决方案：

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

对于bobince来说，是的 - 您需要在参数名称中转义.个字符。

Answer 4

Modern browsers提供URLSearchParams界面来处理搜索参数。其中有delete方法可以按名称删除param。

＆＃13;

＆＃13;

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`)
}

＆＃13;

＆＃13;

＆＃13;

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;
    }
}

<强>更新

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

更新2

@schellmax更新以修复在标签之前直接删除查询字符串变量时丢失主题标记符号的情况

Answer 6

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

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

Answer 7

您可以通过以下方式更改网址：

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

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

Answer 8

如果它是URL的实例，请使用delete的{​​{1}}函数

searchParams

Answer 9

这是基于这个问题和这个github要点添加和删除参数的完整功能： 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

使用jQuery：

function removeParam(key) {
    var url = document.location.href;
    var params = url.split('?');
    if (params.length == 1) return;

    url = params[0] + '?';
    params = params[1];
    params = params.split('&');

    $.each(params, function (index, value) {
        var v = value.split('=');
        if (v[0] != key) url += value + '&';
    });

    url = url.replace(/&$/, '');
    url = url.replace(/\?$/, '');

    document.location.href = url;
}

Answer 12

以上版本为功能

function removeURLParam(url, param)
{
 var urlparts= url.split('?');
 if (urlparts.length>=2)
 {
  var prefix= encodeURIComponent(param)+'=';
  var pars= urlparts[1].split(/[&;]/g);
  for (var i=pars.length; i-- > 0;)
   if (pars[i].indexOf(prefix, 0)==0)
    pars.splice(i, 1);
  if (pars.length > 0)
   return urlparts[0]+'?'+pars.join('&');
  else
   return urlparts[0];
 }
 else
  return url;
}

Answer 13

你应该使用一个库来进行URI操作，因为它比表面看起来要复杂得多。看看：http://medialize.github.io/URI.js/

Answer 14

这里有一个解决方案：

1. 使用URLSearchParams（不难理解正则表达式）
2. 更新搜索栏中的URL ，而无需重新加载
3. 保留网址的所有其他部分（例如哈希）
如果删除了最后一个参数，则
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);
    }
}

注意：如其他答案中指出的那样，URLSearchParams是not supported in IE，因此请使用polyfill。

Answer 15

从我所看到的，以上都不能处理正常参数和数组参数。这是一个。

url = location.href;
    -> http://example.com/?tags[]=single&tags[]=promo&sold=1

url = removeURLParameter("sold", url)
    -> http://example.com/?tags[]=single&tags[]=promo

url = removeURLParameter("tags", url)
    -> http://example.com/

url = addURLParameter("tags", ["single", "promo"], url)
    -> http://example.com/?tags[]=single&tags[]=promo

url = addURLParameter("sold", 1, url)
    -> http://example.com/?tags[]=single&tags[]=promo&sold=1

如何使用它：

class CreateOrdersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
          Schema::create('orders', function (Blueprint $table){
          $table->increments('order_id');
          $table->integer('order_no');
          $table->string('total_price');
          $table->date('date_received');
          $table->date('date_expected');
          $table->integer('product_id')->unsigned();
          $table->foreign('product_id')->references('product_id')->on('product');
          $table->string('product_snumber');
          $table->integer('customer_name')
          $table->string('order_status');
          $table->timestamps();
          });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
                Schema::dropIfExists('orders');
    }
}

当然，要更新参数，只需删除然后添加即可。随意为它做一个虚拟功能。

Answer 16

此线程上的所有响应都存在缺陷，因为它们不保留URL的锚点/片段部分。

因此，如果您的网址如下：

http://dns-entry/path?parameter=value#fragment-text

并替换'参数'

你将丢失你的片段文本。

以下是解决此问题的先前答案（bobince via LukePH）的改编：

function removeParameter(url, parameter)
{
  var fragment = url.split('#');
  var urlparts= fragment[0].split('?');

  if (urlparts.length>=2)
  {
    var urlBase=urlparts.shift(); //get first part, and remove from array
    var queryString=urlparts.join("?"); //join it back up

    var prefix = encodeURIComponent(parameter)+'=';
    var pars = queryString.split(/[&;]/g);
    for (var i= pars.length; i-->0;) {               //reverse iteration as may be destructive
      if (pars[i].lastIndexOf(prefix, 0)!==-1) {   //idiom for string.startsWith
        pars.splice(i, 1);
      }
    }
    url = urlBase + (pars.length > 0 ? '?' + pars.join('&') : '');
    if (fragment[1]) {
      url += "#" + fragment[1];
    }
  }
  return url;
}

Answer 17

另一个直接，简单的答案是

let url = new URLSearchParams(location.search)
let key = 'some_key'

return url.has(key)
    ? location.href.replace(new RegExp(`[?&]${key}=${url.get(key)}`), '')
    : location.href

Answer 18

我实际上编写了以下函数来处理url参数并以字符串的形式获取最终状态并重定向页面。希望它会受益。

function addRemoveUrlQuery(addParam = {}, removeParam = [], startQueryChar = '?'){

    let urlParams = new URLSearchParams(window.location.search);

    //Add param
    for(let i in addParam){
        if(urlParams.has(i)){ urlParams.set(i, addParam[i]); }
        else                { urlParams.append(i, addParam[i]); }
    }

    //Remove param
    for(let i of removeParam){
        if(urlParams.has(i)){
            urlParams.delete(i);
        }
    }

    if(urlParams.toString()){
        return startQueryChar + urlParams.toString();
    }

    return '';
}

例如，当我单击一个按钮时，我希望删除页面值并添加类别值。

let button = document.getElementById('changeCategory');
button.addEventListener('click', function (e) {

    window.location = addRemoveUrlQuery({'category':'cars'}, ['page']);

});

我认为这非常有用！

Answer 19

如果您有 URLSearchParams 的 polyfill 或者根本不需要支持 Internet Explorer，那么我会像这里其他答案中建议的那样使用它。如果你不想依赖URLSearchParams，我会这样做：

function removeParameterFromUrl(url, parameter) {
  const replacer = (m, p1, p2) => (p1 === '?' && p2 === '&' ? '?' : p2 || '')
  return url.replace(new RegExp(`([?&])${parameter}=[^&#]+([&#])?`), replacer)
}

它将用 ? 替换前面是 p1 (&) 后面是 p2 (?) 的参数，以确保参数列表仍然以问号开头，否则，它将用下一个分隔符 (p2) 替换它：可能是 &，或 #，或 undefined 回落到一个空字符串。

Answer 20

很高兴您滚动到这里。

我建议您通过下一个可能的解决方案来解决此任务：

1. 您只需要支持现代浏览器（Edge> = 17）-使用URLSearchParams.delete() API。它是本机的，显然是解决此任务的最便捷方法。
2. 如果这不是一个选项，则可能需要编写一个函数来执行此操作。 Such a function确实
   • 如果不存在参数，请勿更改URL
   • 删除不带值的URL参数，例如http://google.com/?myparm
   • 删除带有值的URL参数，例如http://google.com/?myparm=1
   • 如果两次在URL中删除URL参数，例如http://google.com?qp=1&qpqp=2&qp=1
   • 不使用for循环，并且在循环遍历过程中不修改数组
   • 更实用
   • 比正则表达式解决方案更具可读性
   • 在使用之前，请确保您的网址未编码

在IE> 9（ES5版本）中工作

function removeParamFromUrl(url, param) {  // url: string, param: string
  var urlParts = url.split('?'),
      preservedQueryParams = '';

  if (urlParts.length === 2) {
    preservedQueryParams = urlParts[1]
      .split('&')
      .filter(function(queryParam) {
        return !(queryParam === param || queryParam.indexOf(param + '=') === 0)
      })
      .join('&');
  }

  return urlParts[0] +  (preservedQueryParams && '?' + preservedQueryParams); 
}

精美的ES6版本

function removeParamFromUrlEs6(url, param) {
  const [path, queryParams] = url.split('?');
	let preservedQueryParams = '';

  if (queryParams) {
    preservedQueryParams = queryParams
      .split('&')
      .filter(queryParam => !(queryParam === param || queryParam.startsWith(`${param}=`)))
      .join('&');
  }

  return `${path}${preservedQueryParams && `?${preservedQueryParams}`}`;  
}

See how it works here

Answer 21

function removeParamInAddressBar(parameter) {
    var url = document.location.href;
    var urlparts = url.split('?');

    if (urlparts.length >= 2) {
        var urlBase = urlparts.shift();
        var queryString = urlparts.join("?");

        var prefix = encodeURIComponent(parameter) + '=';
        var pars = queryString.split(/[&;]/g);
        for (var i = pars.length; i-- > 0;) {
            if (pars[i].lastIndexOf(prefix, 0) !== -1) {
                pars.splice(i, 1);
            }
        }

        if (pars.length == 0) {
            url = urlBase;
        } else {
            url = urlBase + '?' + pars.join('&');
        }

        window.history.pushState('', document.title, url); // push the new url in address bar
    }
    return url;
}

Answer 22

对于今天的浏览器，这是具有 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 23

这将返回没有任何GET参数的URL：

var href = document.location.href;
var search = document.location.search;
var pos = href.indexOf( search );
if ( pos !== -1 ){
    href = href.slice( 0, pos );
    console.log( href );
}

Answer 24

ssh_imov

的解决方案的修改版本

function removeParam(uri, keyValue) {
      var re = new RegExp("([&\?]"+ keyValue + "*$|" + keyValue + "&|[?&]" + keyValue + "(?=#))", "i"); 
      return uri.replace(re, '');
    }

像这样打电话

removeParam("http://google.com?q=123&q1=234&q2=567", "q1=234");
// returns http://google.com?q=123&q2=567

Answer 25

const params = new URLSearchParams(location.search)
params.delete('key_to_delete')
console.log(params.toString())

Answer 26

function removeQueryStringParameter(uri, key, value) 
{

var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");

    var separator = uri.indexOf('?') !== -1 ? "&" : "?";

    if (uri.match(re)) {

        return uri.replace(re, '');

    }
}

Answer 27

如果您使用的是jQuery，那么有一个很好的查询字符串操作插件：

• http://plugins.jquery.com/project/query-object