Append value to URL search param

Question

I'm trying to add a value to a search parameter in an URL but it's partly not working. For example I've this URL:

http://localhost.com/?color=Green&size=L

How can I add now a second value to color separated with a ,?

This is how the URL must look after setting a second param:

http://localhost.com/?color=Green,Red&size=L

I've tried it with this here:

window.history.pushState(null, null, window.location.search + ',' + 'Red');

But the result is:

http://localhost.com/?color=Green,Red&size=L,Red

So how can I add a value comma separated to a search parameter in my URL?

The result you say you're getting doesn't look right. It should only have `,Red` at the end, not in the middle. — Barmar, Dec 07 '18 at 22:05
Possible duplicate of [How can I add or update a query string parameter?](https://stackoverflow.com/questions/5999118/how-can-i-add-or-update-a-query-string-parameter) — Heretic Monkey, Dec 07 '18 at 22:07

score 3 · Accepted Answer · answered Dec 07 '18 at 22:04

3

Use a regular expression to match the color=... parameter.

window.history.pushState(null, null, window.location.search.replace(/\bcolor=[^&]*/, '$&,Red'));

answered Dec 07 '18 at 22:04

Barmar

596,455
48
393
495

Jonas Wilms · Answer 2 · 2018-12-09T21:54:27.777

You could parse the url, mutate it and build it up again:

  function parseURL(url) {
    const [domain, rest] = url.split("?");
    const args = {};
    for(const [k, v] of rest.split("&").map(pair => pair.split("=")))
      args[k] = v;
    return { domain, args };
 }

 const toURL = ({ url, args }) =>
    url + "?" + Object.entries(args).map(pair => pair.join("=")).join("&");

 const url = parseURL(window.location);
 url.args["color"] += ",Red";
 window.location = toURL(url);

That way you can easily modify all different parameters.

Append value to URL search param

2 Answers2

Linked