Best way to pass parentheses in URL?

Question

I have turn to the API, which apparently accepts parameters for a redirecting request as one of the parameters. I prefer use the URL object to create requests. To add and encode parameters, I use searchParams. But searchParams encodes, among other things, the parentheses ( and ), which eventually leads to request error.

What i try to do:

const country = 'us'
const language = 'en'
const anchor = 0
const consumerChannelId = 'd9a5bc42-4b9c-4976-858a-f159cf99c647'

const count = 24

const remoteSearch= `/product_feed/rollup_threads/v2?filter=marketplace(${country})&filter=language(${language})&anchor=${anchor}&consumerChannelId=${consumerChannelId}&count=${count}`

const url = new URL('https://example.xyz/v1')
url.searchParams.append('queryid', 'products')
url.searchParams.append('country', country)
url.searchParams.append('language', language)
url.searchParams.append('endpoint', remoteSearch)

And what i got:

https://example.xyz/v1?queryid=products&country=us&language=en&endpoint=%2Fproduct_feed%2Frollup_threads%2Fv2%3Ffilter%3Dmarketplace%28us%29%26filter%3Dlanguage%28en%29%26anchor%3D0%26consumerChannelId%3Dd9a5bc42-4b9c-4976-858a-f159cf99c647%26count%3D24

What i should got:

https://example.xyz/v1?queryid=products&country=us&language=en&endpoint=en&endpoint=%2Fproduct_feed%2Frollup_threads%2Fv2%3Ffilter%3Dmarketplace(us)%26filter%3Dlanguage(en)%26anchor%3D0%26consumerChannelId%3Dd9a5bc42-4b9c-4976-858a-f159cf99c647%26count%3D24

My solution:

const country = 'us'
const language = 'en'
const anchor = 0
const consumerChannelId = 'd9a5bc42-4b9c-4976-858a-f159cf99c647'

const count = 24

const remoteSearch = `/product_feed/rollup_threads/v2?filter=marketplace(${country})&filter=language(${language})&anchor=${anchor}&consumerChannelId=${consumerChannelId}&count=${count}`
const endpoint = encodeURIComponent(remoteSearch)

const url = new URL('https://example.xyz/v1')
url.searchParams.append('queryid', 'products')
url.searchParams.append('country', country)
url.searchParams.append('language', language)
url.searchParams.append('endpoint', language)

const correctURL = url.href + '&endpoint=' + endpoint

So my question goes like this: how to pass parentheses in the URL or how to make this code better?

Parentheses “()” may be used as such in the query part of URL. It is allowable, but not necessary, to encode them, as “%28” and “%29”. — stacj, Jul 13 '21 at 14:23

score 2 · Answer 1 · answered Jul 13 '21 at 14:26

Parentheses “()” may be used as such in the query part of URL. It is allowable, but not necessary, to encode them, as “%28” and “%29”.

You can use YOURURL.replace(/\(/g, "%28").replace(/\)/g, "%29") to replace all brackets by the correct URL encoding,

const country = 'us'
const language = 'en'
const anchor = 0
const consumerChannelId = 'd9a5bc42-4b9c-4976-858a-f159cf99c647'

const count = 24

const remoteSearch= `/product_feed/rollup_threads/v2?filter=marketplace(${country})&filter=language(${language})&anchor=${anchor}&consumerChannelId=${consumerChannelId}&count=${count}`
  .replace(/\(/g, "%28").replace(/\)/g, "%29"); // use regex to replace

const url = new URL('https://example.xyz/v1')
url.searchParams.append('queryid', 'products')
url.searchParams.append('country', country)
url.searchParams.append('language', language)
url.searchParams.append('endpoint', remoteSearch)

console.log(url);

I don't understand why we need to replace parentheses in remoteSearch, if searchParams will encode them anyway. In this case we got (for example): `marketplace%2528us%2529%` It looks like we are adding a new wrapper. Without replace, searchParams encode them like: `marketplace%28us%29` but i need pass them to URL in this manner: `marketplace(us)` Remote API doesnt accept encode Parentheses — whoisYeshua, Jul 14 '21 at 07:41

score 0 · Answer 2 · answered Jul 13 '21 at 14:38

0

I would suggest use encodeURIComponent() it's built-in function but in your case, it might not be useful you can create a separate function to do that

function encodeNonURIComponent(url) {
  return encodeURIComponent(url).replace(/[!'()*]/g, function(c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

answered Jul 13 '21 at 14:38

red

27
6

Maybe I expressed myself incorrectly, but I just don't need to encode parentheses. For these purposes, my current solution uses encodeURIComponent. But then I have to add the endpoint parameter with the value remoteSearch using string concatenation (because the searchParams method encodes parentheses - and I don't need it) – whoisYeshua Jul 14 '21 at 07:52

Best way to pass parentheses in URL?

2 Answers2