如何从 URL 字符串中删除一些参数？

Question

我有这个var 存储一个字符串，该字符串表示一个充满参数的 URL。我正在使用 AngularJS，但我不确定是否有任何有用的模块（或者可能使用纯 JavaScript）来删除不需要的 URL 参数而不必使用正则表达式？

例如，我需要从以下位置删除 &month=05 和 &year=2017：

var url = "at merge ?derivate=21&gear_type__in=13&engine=73&month=05&year=2017"

Answer 1

使用URLSearchParams API:

var url = "at merge ?derivate=21&gear_type__in=13&engine=73&month=05&year=2017"
var urlParts = url.split('?');
var params = new URLSearchParams(urlParts[1]);
params.delete('month');
params.delete('year')
var newUrl = urlParts[0] + '?' + params.toString()
console.log(newUrl);

使用此 API 的优势在于它可以使用正确的 percent encoding. 并创建字符串

欲了解更多信息，请参阅MDN Developer Reference - URLSearchParams API.

Answer 2

您可以使用带有 2 个参数的 function：您尝试删除的 param 和您的 source URL：

function removeParam(key, sourceURL) {
    var rtn = sourceURL.split("?")[0],
        param,
        params_arr = [],
        queryString = (sourceURL.indexOf("?") !== -1) ? sourceURL.split("?")[1] : "";
    if (queryString !== "") {
        params_arr = queryString.split("&");
        for (var i = params_arr.length - 1; i >= 0; i -= 1) {
            param = params_arr[i].split("=")[0];
            if (param === key) {
                params_arr.splice(i, 1);
            }
        }
        rtn = rtn + "?" + params_arr.join("&");
    }
    return rtn;
}

var url = "at merge ?derivate=21&gear_type__in=13&engine=73&month=05&year=2017";

var url2 = removeParam("month", url);
var url3 = removeParam("year", url2);

console.log(url3);

---

Alternative solution with a regex

Answer 3

当然可以使用 RegExr：((&)year=([^&]))|((&)month=([^&]))

使用：

url = url.replace(/(year=([^&]*))|(month=([^&]*))/g, '');

阅读更多正则表达式:)...

function removeParam(name, url){
     return url.replace('/((&)*' + name + '=([^&]*))/g','');
}

var url = "?derivate=21&gear_type__in=13&engine=73&month=05&year=2017"

function removeParam(name, _url){
         var reg = new RegExp("((&)*" + name + "=([^&]*))","g");
         return _url.replace(reg,'');
}

url = removeParam('year', url);
url = removeParam('month', url);

document.getElementById('url-replace').innerHTML = url;

<div id="url-replace"></div>

Answer 4

使用字符串替换：

var url = "at merge ?derivate=21&gear_type__in=13&engine=73&month=05&year=2017";
var modifiedUrl = url.replace('&month=05','').replace('&year=2017','');
console.log(modifiedUrl);

Answer 5

你可以使用库https://www.npmjs.com/package/query-string

将参数转换为对象，然后只需使用delete params.year delete params.month 并将其转换回来并将其添加到原始网址中

const queryString = require('query-string');

console.log(location.search);
//=> '?foo=bar'

const parsed = queryString.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}

console.log(location.hash);
//=> '#token=bada55cafe'

const parsedHash = queryString.parse(location.hash);
console.log(parsedHash);
//=> {token: 'bada55cafe'}

parsed.foo = 'unicorn';
parsed.ilike = 'pizza';

const stringified = queryString.stringify(parsed);
//=> 'foo=unicorn&ilike=pizza'

location.search = stringified;
// note that `location.search` automatically prepends a question mark
console.log(location.search);
//=> '?foo=unicorn&ilike=pizza'

Answer 6

增强了@Mistalis 的回答。

1. 返回参数最后一次出现的值
2. 删除已删除参数的? 是唯一的参数
3. 网址编码查询参数以确保浏览器状态

function pruneParams(key, url) {
  var urlParts = url.split('?');
  var rtnUrl = urlParts[0];
  var paramParts;
  var paramValue;
  var params_arr = [];
  var queryString = decodeURIComponent(urlParts[1] || '');
  if (queryString !== '') {
    params_arr = queryString.split('&');
    for (var i = params_arr.length - 1; i >= 0; --i) {
      paramParts = params_arr[i].split('=');
      if (paramParts[0] === key) {
        paramValue = paramParts[1];
        params_arr.splice(i, 1);
      }
    }
    if (params_arr.length) {
      var wasEncoded = url.split('&').length < 2;
      rtnUrl = rtnUrl + '?' + (wasEncoded ? encodeURIComponent(params_arr.join('&')) : params_arr.join('&'));
    }
  }
  return { url: rtnUrl, [key]: paramValue, paramCount: params_arr.length > 1 };
}

var u1 = 'http://localhost:4200/member/';
var u2 = 'http://localhost:4200/member/?ts=23423424';
var u3 = 'http://localhost:4200/member/?fooo=2342342asfasf&ts=252523525';
var u4 = 'http://localhost:4200/member?foo=234243&ts=234124124&bar=21kfafjasf&ts=223424234&dd=This Is A Line';
var u5 = 'http://localhost:4200/member?foo%3D234243%26ts%3D2242424%26bar%3D21kfafjasf%26dd%3DThis%20Is%20A%20Line';

console.log(pruneParams('ts', u1));
console.log(pruneParams('ts', u2));
console.log(pruneParams('ts', u3));
console.log(pruneParams('ts', u4));
console.log(pruneParams('ts', u5));


//   {
//     url: 'http://localhost:4200/member/',
//     ts: undefined,
//     paramCount: false,
//   }
//   {
//     url: 'http://localhost:4200/member/',
//     ts: '23423424',
//     paramCount: false,
//   }
//   {
//     url: 'http://localhost:4200/member/?fooo=2342342asfasf',
//     ts: '252523525',
//     paramCount: false,
//   },
//   {
//     url: 'http://localhost:4200/member?foo=234243&bar=21kfafjasf&dd=This Is A Line',
//     ts: '234124124',
//     paramCount: true,
//   }
//   {
//     url: 'http://localhost:4200/member?foo%3D234243%26bar%3D21kfafjasf%26dd%3DThis%20Is%20A%20Line',
//     ts: '2242424',
//     paramCount: true,
//   }