如何忽略无效的 URL 参数？

Question

在我继续之前，让我说我已经查看了许多线程，但找不到适合我的答案。

基本上，我已经构建了一个自定义链接缩短器，并且我正在使用 URLSearchParams 来提取要缩短的 URL 以及来自 URL 搜索查询的自定义 slug，如下所示：

var e = window.location.search;
const urlParams = new URLSearchParams(e);
const url = urlParams.get("url");
const slug = urlParams.get("slug");

查询格式为：?url=https://google.com&slug=customslug

处理完参数后，URL 字符串会使用trim() 处理以删除任何空格。当调用我正在使用的 API (https://short.io) 时，最终输出使用encodeURIComponent() 进行编码。

但是，我希望能够使用 & 传递 URL，例如：?url=https://google.com/&testing&slug=customslug。我理想的解决方案是简单地将不属于&slug 参数的任何& 视为&url 参数中包含的URL 的一部分。目前，如果 & 字符未附加到有效参数（url 或 slug），则会被忽略。

我已尝试使用encodeURIComponent() 对查询输入进行编码，但这会导致无法获取任一已定义的参数。我也尝试使用split("&slug",1) 拆分输入，但这会产生一个数组，我无法将数组传递给 Short.io API。

有什么建议吗？

Answer 1

我通过构建 @CherryDT 关于使用 window.location.hash 获取我的 URL 字符串的评论解决了我的问题。最终，我选择放弃在地址栏中添加 slug 的想法，因为它会导致我的脚本出现更多问题。

虽然此解决方案仅适用于我的目的，但我将详细介绍该解决方案，因为它可以解决无法从地址栏中对传递的 URL 字符串进行编码的问题。有一天可能对某人有用。

var e = window.location.href.replace(window.location.hash, '');
if (e.endsWith("?") === true) {
    var url = window.location.hash.substr(1);
    if (url === "") {
        // Error code
    } else {
        console.log("A URL to be shortened was provided via hash.");
        // Pass url to rest of script
     }
 }

Answer 2

您应该使用 URL 编码的 & 符号 %26。

var e = "?url=https://google.com/%26testing&slug=customslug";
const urlParams = new URLSearchParams(e);
const url = urlParams.get("url");
const slug = urlParams.get("slug");

console.log(url);
console.log(slug);