使用URLSearchParams检查，获取并设置参数值为URL

下面是获取当前URL并设置新参数并根据需要更新URL或重新加载页面的示例

var rows = 5; // value that you want to set
var url = new URL(window.location);
(url.searchParams.has('rows') ? url.searchParams.set('rows', rows) : url.searchParams.append('rows', rows));

url.search = url.searchParams;
url        = url.toString();

// if you want to append into URL without reloading the page
history.pushState({}, null, url);

// want to reload the window with a new param
window.location = url;

一个可行的替代字符串操作的方法是建立一个html表单，只修改rows元素的值吗?

html就像是

<form id='myForm' target='site.fwx'>
    <input type='hidden' name='position' value='1'/>
    <input type='hidden' name='archiveid' value='5000'/>
    <input type='hidden' name='columns' value='5'/>
    <input type='hidden' name='rows' value='20'/>
    <input type='hidden' name='sorting' value='ModifiedTimeAsc'/>
</form>

使用下面的JavaScript提交表单

var myForm = document.getElementById('myForm');
myForm.rows.value = yourNewValue;
myForm.submit();

可能不适合所有情况，但可能比解析URL字符串更好。

Ben Alman有一个很好的jquery querystring/url插件，可以让你很容易地操纵querystring。

如要求-

点击这里进入他的测试页面

在firebug中，在控制台中输入以下内容

jQuery.param.querystring (window.location。报道中,x = 3&newValue = 100);

它将返回以下修改后的url字符串

http://benalman.com/code/test/js-jquery-url-querystring.html?a=3&b=Y&c=Z&newValue=100#n=1&o=2&p=3

注意，a的查询字符串值已从X更改为3，并添加了新值。

然后你可以使用新的url字符串，但你希望 使用文档。location = newUrl或改变一个锚链接等

URL查询参数可以使用URLSearchParams和History接口轻松修改:

// Construct URLSearchParams object instance from current URL querystring.
var queryParams = new URLSearchParams(window.location.search);
 
// Set new or modify existing parameter value. 
//queryParams.set("myParam", "myValue");
queryParams.set("rows", "10");
 
// Replace current querystring with the new one.
history.replaceState(null, null, "?"+queryParams.toString());

或者，我们可以使用pushState()方法来创建一个新的历史条目，而不是使用replaceState()修改当前的历史条目:

history.pushState(null, null, "?"+queryParams.toString());

https://zgadzaj.com/development/javascript/how-to-change-url-query-parameter-with-javascript-only

我的函数支持删除参数

function updateURLParameter(url, param, paramVal, remove = false) {
        var newAdditionalURL = '';
        var tempArray = url.split('?');
        var baseURL = tempArray[0];
        var additionalURL = tempArray[1];
        var rows_txt = '';

        if (additionalURL)
            newAdditionalURL = decodeURI(additionalURL) + '&';

        if (remove)
            newAdditionalURL = newAdditionalURL.replace(param + '=' + paramVal, '');
        else
            rows_txt = param + '=' + paramVal;

        window.history.replaceState('', '', (baseURL + "?" + newAdditionalURL + rows_txt).replace('?&', '?').replace('&&', '&').replace(/\&$/, ''));
    }

我也写了一个库获取和设置URL查询参数在JavaScript。

下面是它用法的一个例子。

var url = Qurl.create()
  , query
  , foo
  ;

获取查询参数作为对象，通过键，或添加/更改/删除。

// returns { foo: 'bar', baz: 'qux' } for ?foo=bar&baz=qux
query = url.query();

// get the current value of foo
foo = url.query('foo');

// set ?foo=bar&baz=qux
url.query('foo', 'bar');
url.query('baz', 'qux');

// unset foo, leaving ?baz=qux
url.query('foo', false); // unsets foo