在 URL 中传递括号的最佳方法？

Question

我已经求助于 API，它显然接受重定向请求的参数作为参数之一。我更喜欢使用URL 对象来创建请求。要添加和编码参数，我使用searchParams。但 searchParams 对括号 ( 和 ) 等进行编码，最终导致请求错误。

我想做什么：

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)

我得到了什么：

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

我应该得到什么：

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

我的解决方案：

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

所以我的问题是这样的：如何在 URL 中传递括号或如何使这段代码更好？

Answer 1

括号“()”可用于 URL 的查询部分。将它们编码为“%28”和“%29”是允许的，但不是必须的。

---

您可以使用YOURURL.replace(/\(/g, "%28").replace(/\)/g, "%29") 将所有括号替换为正确的 URL 编码，

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);

Answer 2

我建议使用 encodeURIComponent() 它的内置函数，但在您的情况下，您可以创建一个单独的函数来执行此操作可能没有用

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