Encoding special characters whilst setting parameters on the URL

Question

I need to set a number of URL parameters, which also need to include a special character $

Currently I am using .set() to create and set these parameter values:

const myUrl = new URL("http://www.example.com/?");

let params = new URLSearchParams();
params.set('$param1', '60');
params.set('$param2', '100');

I understand that I need to use encodeURI() to ensure that I get $ in the URL and not %24 - but at what stage do I do this?

If I do this when I stringify and add the params to the URL they have already been converted.

myUrl.search = encodeURI(params.toString());
// Outputs: http://www.example.com/?%24param1=60&%24param2=100
// Desired: http://www.example.com/?$param1=60&$param2=100

Why would you want to have the `$` which is not a valid URL entity? — mplungjan, Aug 16 '23 at 11:59
@mplungjan because that is the requirement for what I need to do — user1486133, Aug 16 '23 at 12:00
If you want to build an invalid URL, just build it as a string; that's all it is anyway. — Pointy, Aug 16 '23 at 12:03
@Pointy that was my initial solution but as I need to add a lot of params and also add some logic around what to include, using a long template string became quite confusing and hard to read. — user1486133, Aug 16 '23 at 12:10

score 1 · Accepted Answer · answered Aug 16 '23 at 11:59

In your case, the $ character is being encoded as %24 because it's a reserved character in URLs. The URLSearchParams object's set method automatically encodes these characters to ensure the resulting string is a valid URL.

However, if you want to include the $ character as is, you can bypass the automatic encoding by manually constructing the query string:

const myUrl = new URL("http://www.example.com/?");

let params = ['$param1=60', '$param2=100'].join('&');

myUrl.search = params;

console.log(myUrl.toString());
// Outputs: http://www.example.com/?$param1=60&$param2=100

This will give you the desired output, but be aware that this might not be a valid URL according to the URL specification, as $ is a reserved character. This could potentially lead to issues with some servers or APIs.

If you control the server or API you're interacting with and you're sure it can handle URLs with $ characters in the query string, then this approach should work. Otherwise, it's generally safer to stick with the automatic encoding provided by URLSearchParams.

Please confirm if this solution works for you or if you need further assistance.

Excellent thank you. Can confirm it is needed in this situation and the server I am interacting with accepts it (and requires it) — user1486133, Aug 16 '23 at 12:03

mplungjan · Answer 2 · 2023-08-16T12:11:36.213

0

Since you need it and your server supports it, just fix it at the end

const myUrl = new URL("http://www.example.com/?");

let params = myUrl.searchParams;
params.set('$param1', '60');
params.set('$param2', '100');

console.log(myUrl.toString().replace(/%24/g,"$"))

edited Aug 16 '23 at 12:11

answered Aug 16 '23 at 11:56

mplungjan

169,008
28
173
236

Encoding special characters whilst setting parameters on the URL

2 Answers2