如何在JavaScript或NextJS中解码URL？

Question

在我们的NextJS应用程序中，有一个URL，其中包含各种查询字符串。

然而，对于一些查询字符串，我们遇到了编码显示的问题。例如像这样：

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

正如您所看到的，冒号被替换为%CA。

我知道这可能是默认行为，但我需要URL中的冒号。

有没有办法让我得到这个？所以我需要上面的URL像这样：

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

我们正在这样使用 URLSearchParams() ：

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

    return searchParams.toString();
};

- Codehan25

---

这里没有问题，如果你执行 searchParams.getAll('project');，你会看到它返回了 ['project:one', 'project:two']。 - Reyno

@Reyno 但是为什么我的URL中没有显示出来呢？我认为这是因为我们正在使用Next.js router.push()，因此URL再次被调整了。我不知道我在这里该怎么做才能避免这种编码问题。 - Codehan25

因为冒号 : 是一个不安全的 ASCII 字符。它会被转换，以便可以安全地通过互联网发送。而且，正如您所看到的，当使用 .get 或 .getAll 方法时，它会被转换回来。请参阅 HTML URL 编码 了解更多信息。 - Reyno

Answer 1

使用 JavaScript 中的全局函数 decodeURIComponent。

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

以下是您想要的结果：

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

- Ali Torki

Answer 2

这些是URL中特殊字符的转义码，是必需的，不能避免。此外，您无需使用URLSearchParams。只需使用router.query即可获取查询参数，使用router.pathname获取路径（/my-app/test-app）在Next.js中。

- MrCeRaYA