I'm changing current user's path through a function:

function setSomeValue(someValues) {
      var query = '';
      for (var i = 0; i < someValues.length; i++) {
        query += someValues[i] + ',';
      }
      if ('URLSearchParams' in window) {
        var searchParams = new URLSearchParams(window.location.search);
        searchParams.set("paramName", query);

        var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
        history.pushState(null, '', newRelativePathQuery);
      }
    }

As you can see, I'm adding to user's location new words and want new location to be like this:

www.site?paramName=value1,value2,

But browser converts my mas into %2C so I get this:

www.site?paramName=value1%2Cvalue2%2C

What should be done to make pushing mas to URL possible?

---

I'm changing current user's path through a function:

function setSomeValue(someValues) {
      var query = '';
      for (var i = 0; i < someValues.length; i++) {
        query += someValues[i] + ',';
      }
      if ('URLSearchParams' in window) {
        var searchParams = new URLSearchParams(window.location.search);
        searchParams.set("paramName", query);

        var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
        history.pushState(null, '', newRelativePathQuery);
      }
    }

As you can see, I'm adding to user's location new words and want new location to be like this:

www.site.?paramName=value1,value2,

But browser converts my mas into %2C so I get this:

www.site.?paramName=value1%2Cvalue2%2C

What should be done to make pushing mas to URL possible?

---

• javascript

Share Improve this question Follow edited Aug 1, 2018 at 11:02 Lab Lab asked Aug 1, 2018 at 10:25 Lab LabLab Lab 8011111 silver badges3535 bronze badges 20

• 1 @IgnacioVazquez-Abrams, if you don't know how this should be done - don't answer to me – Lab Lab Commented Aug 1, 2018 at 10:30
• 3 @LabLab calm down man. Don't take everything so serious. Calling url encoding "such a disgusting thing" sounds pretty strange. Probably changing that particular part of your question would stop everyone from upvoting Ignacio's ment. :) – Anastasios Selmani Commented Aug 1, 2018 at 10:38
• 1 @LabLab the encoded version is the correct one. It HAS to be encoded. Imagine not encoding & and thus accidently adding a new parameter. – Sebastian Speitel Commented Aug 1, 2018 at 10:38
• 1 @CBroe Something of a side note to the mechanical discussion here: I don't think the specification requires mas to be percent-encoded. query tokens are made of pcahr tokens, which consists of the options unreserved / pct-encoded / sub-delims. According to RFC 3986, it looks like a ma is a sub-delims token, which means it does not need to resort to a pct-encoded token. – apsillers Commented Aug 1, 2018 at 10:49
• 3 @IgnacioVazquez-Abrams FYI, mas are valid in URLs according RFC 3986. This transformation is the WHATWG's byte serialization specification being much more conservative than what the URL spec allows. – apsillers Commented Aug 1, 2018 at 11:00

 |  Show 15 more ments

2 Answers 2

Sorted by: Reset to default 4

(copy & paste from several ments)

It might be due to URLSearchParams and its toString method implementation - but we can’t know, because you have not shown us what that actually is. If that is not deliberately encoding the ma, and the browser simply does it automatically - then there’s little you can do about that.

If newRelativePathQuery contains the encoded versions already, maybe they could be replaced back to normal mas. But if history.pushState does it, then “other ways” to create the URL itself won’t help you much.

Since a debug output showed that newRelativePathQuery contains the encoded mas already, you can try and replace them back to mas, and see if that “survives” being pushed to the history then.

It's a little hacky, but here's one solution. Let's say we want to use URL's searchParams.set() to set ids=1,2,3,4 in our query string.

If you just do url.searchParams.set("ids", "1,2,3,4"), the URL will have ids=1%2C2%2C3%2C4. To avoid that encoding, first set ids=LIST_OF_IDS_PLACEHOLDER, get the URL as a string, and then replace LIST_OF_IDS_PLACEHOLDER with 1,2,3,4, like this:

const myList = [1,2,3,4],
      url = new URL(document.location.href); // or however you get your URL object

url.searchParams.set("ids", "LIST_OF_IDS_PLACEHOLDER");
const newUrlString = url.toString().replace("LIST_OF_IDS_PLACEHOLDER", ids.join(','));

console.log(newUrlString); // this will include: ids=1,2,3,4