How to remove some parameters from an URL string?

Question

I have this var storing a string that represents a URL full of parameters. I'm using AngularJS, and I'm not sure if there is any useful module (or maybe with plain JavaScript) to remove the unneeded URL parameters without having to use regex?

For example I need to remove &month=05 and also &year=2017 from:

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

@Gonzalo.- you mean by using the methods of the string object? — CommonSenseCode
– CommonSenseCode, Commented Mar 9, 2017 at 16:10

georgeawg · Accepted Answer · 2017-03-09 20:38:29Z

15

Use the 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);

The advantage of using this API is that it works with and creates strings with correct percent encoding.

For more information, see MDN Developer Reference - URLSearchParams API.

edited Mar 9, 2017 at 20:38

answered Mar 9, 2017 at 20:33

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cocowalla Over a year ago

Worth mentioning that this isn't supported in Internet Explorer

georgeawg Over a year ago

One URLSearchParams polyfill -- github.com/jerrybendy/url-search-params-polyfill

d0rf47 Over a year ago

this does work BUT the method that accepts an additional value param has bad support

Community · Accepted Answer · 2017-05-23 12:00:32Z

You can use this function that take 2 parameters: the param you are trying to remove and your 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

HoangHieu · Accepted Answer · 2017-03-09 16:41:51Z

3

Sure you can use RegExr: ((&)year=([^&]))|((&)month=([^&]))

use:

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

2 Comments

Mistalis Over a year ago

From the question: "Is there is any useful module to remove the unneeded URL parameters without having to use regex".

HoangHieu Over a year ago

Opps. that my mistake.

Mamun · Accepted Answer · 2017-03-09 16:32:44Z

2

Using string replace:

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

answered Mar 9, 2017 at 16:32

Mamun

69k9 gold badges51 silver badges62 bronze badges

Comments

moto · Accepted Answer · 2018-12-20 22:51:05Z

0

You can use the library https://www.npmjs.com/package/query-string

Convert the params to an object and then just use delete params.year delete params.month and convert it back and add it to the original url

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'

answered Dec 20, 2018 at 22:51

moto

91013 silver badges29 bronze badges

2 Comments

CommonSenseCode Over a year ago

you shouldn't install an npm library just for that. Npm libraries are full of sub dependencies that introduce vulnerabilities into your code.

moto Over a year ago

You asked for a module... @commonSenseCode It's also easy to see what dependencies a package installs and to look at the code of the module to see if it is bigger than it needs to be.

Avid Coder · Accepted Answer · 2020-05-04 13:36:43Z

Enhnaced @Mistalis's answer.

Return the value of the last occurrence of a param
Remove the ? of the removed param was the only param
Url encoded the query params to ensure browser stately

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,
//   }

danday74 · Accepted Answer · 2022-12-22 16:05:40Z

0

Taken from @Mistalis answer but tidied up. Useful if URLSearchParams API is not available.

const removeUrlParam = function (url, param) {

   var parts = url.split('?')
   
   url = parts[0]
   if (parts.length !== 2) return url
   
   var qs = parts[1]
   if (qs === '') return url

    var params = qs.split('&')
    for (var i = params.length - 1; i >= 0; i -= 1) {
      var key = params[i].split('=')[0]
      if (key === param) params.splice(i, 1)
    }

    return params.length ? url + '?' + params.join('&') : url
}

var url1 = removeUrlParam('/xxxxx', 'a')
var url2 = removeUrlParam('/xxxxx?a=1', 'a')
var url3 = removeUrlParam('/xxxxx?a=1&b=2', 'a')

console.log(url1, url2, url3)

answered Dec 22, 2022 at 16:05

danday74

58.1k56 gold badges273 silver badges337 bronze badges

Collectives™ on Stack Overflow

How to remove some parameters from an URL string?

7 Answers 7

3 Comments

Comments

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related