准备要传递给 API 查询的字符串（转义特殊字符）

Question

I've run into some difficulties with strings and the Fetch API. I've got a React component that accepts a string, sets it to a variable and then constructs a query variable I can pass into fetch() .

The problem is accounting for special characters causing a 404 response. Here are some examples of strings I'm working with, and their desired output.

INPUT >>> DESIRED OUTPUT

Something's going on here >>> somethings-going-on-here

Dungeons & dragons >>> dungeons-%26-dragons

It's happening, right here >>> its-happening-right-here

I have the following regex, but it's not quite there yet (it's missing converting the & to %26 )

replace(/,?\s+/g, '-')

I had looked at using encodeURIComponent function but it doesn't seem to account for single quotes, which is how I landed up on regex.

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

var params = new URLSearchParams();
params.set('param1',`Something's going on here`);
params.toString();

You can also use a library that takes care of it for you: https://www.npmjs.com/package/query-string https://www.npmjs.com/package/qs