没有库，使用URL() WebAPI (https://developer.mozilla.org/en-US/docs/Web/API/URL)

function setURLParameter(url, parameter, value) {
    let url = new URL(url);
    if (url.searchParams.get(parameter) === value) {
        return url;
    }
    url.searchParams.set(parameter, value);
    return url.href;
}

这在IE: https://developer.mozilla.org/en-US/docs/Web/API/URL#Browser_compatibility上不起作用

想想这个例子:

const myUrl = new URL("http://www.example.com?columns=5&rows=20");
myUrl.searchParams.set('rows', 10);
console.log(myUrl.href); // http://www.example.com?columns=5&rows=10
myUrl.searchParams.set('foo', 'bar'); // add new param
console.log(myUrl.href); // http://www.example.com?columns=5&rows=10&foo=bar

它会做和你要求的完全一样的事情。请注意URL必须有正确的格式。在你的例子中，你必须指定协议(http或https)

您可以使用我的这个库来完成这项工作:https://github.com/Mikhus/jsurl

var url = new Url('site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc');
url.query.rows = 10;
alert( url);

我写了一个小的帮助函数，它适用于任何选择。你所需要做的就是将类"redirectOnChange"添加到任何选择元素，这将导致页面重新加载一个新的/更改的querystring参数，等于选择的id和值，例如:

<select id="myValue" class="redirectOnChange"> 
    <option value="222">test222</option>
    <option value="333">test333</option>
</select>

上面的例子会加上“?”myValue=222"或"?myValue=333”(如果存在其他参数，则使用“&”)，然后重新加载页面。

jQuery:

$(document).ready(function () {

    //Redirect on Change
    $(".redirectOnChange").change(function () {
        var href = window.location.href.substring(0, window.location.href.indexOf('?'));
        var qs = window.location.href.substring(window.location.href.indexOf('?') + 1, window.location.href.length);
        var newParam = $(this).attr("id") + '=' + $(this).val();

        if (qs.indexOf($(this).attr("id") + '=') == -1) {
            if (qs == '') {
                qs = '?'
            }
            else {
                qs = qs + '&'
            }
            qs = qs + newParam;

        }
        else {
            var start = qs.indexOf($(this).attr("id") + "=");
            var end = qs.indexOf("&", start);
            if (end == -1) {
                end = qs.length;
            }
            var curParam = qs.substring(start, end);
            qs = qs.replace(curParam, newParam);
        }
        window.location.replace(href + '?' + qs);
    });
});

如果您想在地址栏中更改url:

const search = new URLSearchParams(location.search);
search.set('rows', 10);
location.search = search.toString();

注意，改变位置。搜索重新加载页面。

我的解决方案:

const setParams = (data) => {
    if (typeof data !== 'undefined' && typeof data !== 'object') {
        return
    }

    let url = new URL(window.location.href)
    const params = new URLSearchParams(url.search)

    for (const key of Object.keys(data)) {
        if (data[key] == 0) {
            params.delete(key)
        } else {
            params.set(key, data[key])
        }
    }

    url.search = params
    url = url.toString()
    window.history.replaceState({ url: url }, null, url)
}

然后调用“setParams”并传递一个带有你想设置的数据的对象。

例子:

$('select').on('change', e => {
    const $this = $(e.currentTarget)
    setParams({ $this.attr('name'): $this.val() })
})

在我的情况下，我必须更新html选择输入时，它的变化，如果值是“0”，删除参数。如果对象键为“null”，则可以编辑该函数并从url中删除参数。

希望这对你们有帮助