使用 JavaScript 向 URL 添加参数

javascript url query-string parameters parsing

2022-08-29 23:20:58

在使用AJAX调用的Web应用程序中，我需要提交请求，但在URL的末尾添加一个参数，例如：

原始网址：

http://server/myapp.php?id=10

生成的网址：

http://server/myapp.php?id=10&enabled=true

寻找一个JavaScript函数，该函数解析URL查看每个参数，然后添加新参数或更新值（如果已经存在）。

答案 1

您可以使用以下选项之一：

例：

var url = new URL("http://foo.bar/?x=1&y=2");

// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);

// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);

您可以使用 url.href 或 url.toString（）来获取完整的 URL

答案 2

您需要适应的基本实现将如下所示：

function insertParam(key, value) {
    key = encodeURIComponent(key);
    value = encodeURIComponent(value);

    // kvp looks like ['key1=value1', 'key2=value2', ...]
    var kvp = document.location.search.substr(1).split('&');
    let i=0;

    for(; i<kvp.length; i++){
        if (kvp[i].startsWith(key + '=')) {
            let pair = kvp[i].split('=');
            pair[1] = value;
            kvp[i] = pair.join('=');
            break;
        }
    }

    if(i >= kvp.length){
        kvp[kvp.length] = [key,value].join('=');
    }

    // can return this or...
    let params = kvp.join('&');

    // reload page with new params
    document.location.search = params;
}

这大约是正则表达式或基于搜索的解决方案的两倍，但这完全取决于查询字符串的长度和任何匹配的索引。

我为完成而对慢速正则表达式方法进行了基准测试（大约慢了+150%）

function insertParam2(key,value)
{
    key = encodeURIComponent(key); value = encodeURIComponent(value);

    var s = document.location.search;
    var kvp = key+"="+value;

    var r = new RegExp("(&|\\?)"+key+"=[^\&]*");

    s = s.replace(r,"$1"+kvp);

    if(!RegExp.$1) {s += (s.length>0 ? '&' : '?') + kvp;};

    //again, do what you will here
    document.location.search = s;
}