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

Nothing is wrong here, if you do `searchParams.getAll('project');` you'll see that it returns `['project:one', 'project:two']` — Reyno, Nov 02 '21 at 13:31
@Reyno But why isn't that showing up in my URL? I think it's because we are using Next.js router.push() and for this reason the URL is being adjusted again. I have no idea what I can do here to avoid that encoding. — Codehan25, Nov 02 '21 at 13:34
Because an `:` is an unsafe ASCII character. It get's converted so it can safely be send over the internet. And as you can see it gets converted back when you use the `.get` or `.getAll` methods. See [HTML URL Encoding](https://www.w3schools.com/tags/ref_urlencode.ASP) for more info — Reyno, Nov 02 '21 at 13:39

score 3 · Answer 1 · answered Nov 02 '21 at 15:21

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

MrCeRaYA · Answer 2 · 2021-11-02T14:12:50.987

-1

These are escape codes for special characters in the URL that are necessary and cant be avoided. Also, there's no need for you to use URLSearchParams. Just use router.query will give you query and router.pathname for the path (/my-app/test-app) in nextJS

edited Nov 02 '21 at 14:12

answered Nov 02 '21 at 13:41

MrCeRaYA

581
4
6

How to decode a url in JavaScript or NextJS?

2 Answers2