How to decode a url in JavaScript or NextJS?

Question

In our NextJS application we have a URL that is fed with various query strings.

With some query strings, however, we have the problem that they are displayed in encoded form. For example like this:

http://localhost:8080/my-app/test-app?project=project%3Aone&project=project%3Atwo

As you can see, the colons are replaced with %CA.

I know that this may be a default behavior, but I need the colons in the URL.

Is there any way I can get this? So I need to URL above like:

http://localhost:8080/my-app/test-app?project=project:one&project=project:two

We are using URLSearchParams() like this:

const constructQueryString = (params: any) => {
    const searchParams = new URLSearchParams();
    const projects = params.project.split(',');
    projects.forEach((p) => {
        urlSearchParams.append('project', p);
    });

    return searchParams.toString();
};

Answer 1

Use the decodeURIComponent global function in Javascript

const decodedPath = decodeURIComponent("http://localhost:8080/my-app/test-app?project=project%3Aone&project=project%3Atwo")

The Result is what you want as below:

http://localhost:8080/my-app/test-app?project=project:one&project=project:two