如何在 JavaScript 或 NextJS 中解码 url？答案

【问题标题】：How to decode a url in JavaScript or NextJS?如何在 JavaScript 或 NextJS 中解码 url？
【发布时间】：2021-12-17 00:47:59
【问题描述】：

在我们的 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();
};

【问题讨论】：

这里没有错，如果你这样做searchParams.getAll('project');，你会看到它返回['project:one', 'project:two']
@Reyno 但是为什么我的 URL 中没有显示呢？我认为这是因为我们正在使用 Next.js router.push() 并且因此再次调整 URL。我不知道我能做些什么来避免这种编码。
因为 : 是不安全的 ASCII 字符。它已被转换，因此可以安全地通过 Internet 发送。正如您所看到的，当您使用 .get 或 .getAll 方法时，它会被转换回来。请参阅HTML URL Encoding 了解更多信息

标签： javascript reactjs typescript next.js next-router

【解决方案1】：

这些是 URL 中特殊字符的转义码，它们是必要的且无法避免。此外，您无需使用 URLSearchParams。只需使用router.query 将给你查询和router.pathname 在nextJS 中的路径（/my-app/test-app）

【讨论】：

【解决方案2】：

在 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

【讨论】：