Change value of query parameter using jQuery

Question

I need to change the value of query parameter present in the given URL using jQuery.

There are 2 possible URL's like,

www.domain.com/?id=10&name=xxx

and

www.domain.com/?name=xxx&id=10

I need to change the value of parameter id in this URL into something like www.domain.com/?id=15&name=xxx. Regex seems to be the solution for this, but it looks confusing to me.

Possible solution:

Select the string between "id=" and "&" (or) string from "id=" to the end of string and replace it with desired value 15.

Does anyone have solution for this or any other better solution?

Thanks in advance!

If you google search your title you will get a lot of answer to your question — Carsten Løvbo Andersen, Dec 13 '18 at 06:42
Have you had a look at [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)? There's even a [JS polyfill](https://cdnjs.com/libraries/url-search-params) for browsers that don't support it natively. — Agi Hammerthief, Dec 13 '18 at 06:49
Your question is unclear. Where is this URL that you are wanting to change? Is it the actual URL for the page on which you are running? Is it an `href` in an ``? In addition, you also need to tell us *exactly* what you want, not "something like ..." Does what you said mean that you want both `www.domain.com/?id=10&name=xxx` and `www.domain.com/?name=xxx&id=10` changed to `www.domain.com/?id=15&name=xxx`? Do you really care what the order is (it's *possible* that order matters, but usually it doesn't. You just haven't told us what you actually want)? — Makyen, Dec 13 '18 at 06:58
Editing Questions to improve them (e.g. clarification, adding additional information, etc.) *is encouraged*. However, editing a Question to change it into a different question which results in invalidating an Answer, is against policy on Stack Overflow. Your edit here did so. The policy is that other users should proactively revert such changes. I have done so here. You *are encouraged to [ask a new Question](//stackoverflow.com/questions/ask)*, perhaps with a link to this one for additional context. We want to help, but your new/additional issue needs to be a new Question. — Makyen, Dec 13 '18 at 07:27

Sumesh TG · Answer 1 · 2018-12-13T07:20:30.293

1

var url="www.domain.com/?id=10&name=xxx";
changeUrl("id",15);
changeUrl("name","sumesh");
function changeUrl(key,value){
  var patt = new RegExp(key+"=[a-zA-Z0-9]+");
  var matches = patt.exec(url);
  var id2 = matches[0];
  url = url.replace(id2, key+'='+value);
  console.log(url);
}

Use RegExp to achieve this.

edited Dec 13 '18 at 07:20

answered Dec 13 '18 at 06:54

Sumesh TG

2,557
2
15
29

The parameter "id" is just an example. I need generic regular expression which also must suite for changing the parameter "name". – Vinoth Kumar Dec 13 '18 at 06:57
Generic means how ? do want change entire query string? – Sumesh TG Dec 13 '18 at 06:59
You have given regex for integer. Consider I have a function which accepts parameter and the value. If I pass (id, 15) or (name, yyy) this method should work. – Vinoth Kumar Dec 13 '18 at 07:03
At least use `[0-9]+`, or better, just the [character class `\d+`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#character-classes). – Makyen Dec 13 '18 at 07:03
@VinothKumar That's not what your question asks for. If you wanted that, then you needed to have it *in your question* and *before people answered*. You will need to create a new question to ask for the generalization that you appear to want, as changing a question such that you invalidate answers is against policy. – Makyen Dec 13 '18 at 07:06
@SumeshTG Thanks. It works for what I asked for. I need to ask separate question for your solution. Anyway, I upvote your answer. – Vinoth Kumar Dec 13 '18 at 07:38
@SumeshTG Alphanumeric characters are not the only ones that are valid in query values. Your line `var id2 = matches[0];` will throw an exception if the `key` field does not exist in the URL. Both your RegExp to find the original value and your `url.replace` will silently fail, producing erroneous results, if there are fields (query parameters) which are too similar (e.g. the query is `fooid=100&id=10` and you try to change `id`). – Makyen Dec 13 '18 at 07:45
@Makyen You are correct. – Sumesh TG Dec 13 '18 at 07:48

score 0 · Answer 2 · edited Dec 13 '18 at 06:52

0

Why don't you use simple replace?

var newUrl = location.href.replace("id="+10, "id="+15);

I found this solution from an answer to the question Change url query string value using jQuery (marked as duplicate).

edited Dec 13 '18 at 06:52

Agi Hammerthief

2,114
1
22
38

answered Dec 13 '18 at 06:49

RashFlash

992
2
20
40

But I don't know the value "10" since it is random. How can I handle this? – Vinoth Kumar Dec 13 '18 at 06:52

Change value of query parameter using jQuery

2 Answers2