我有这个URL:
site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc
我需要的是能够改变'行' url参数值我指定的东西，让我们说10。如果“行”不存在，我需要将它添加到url的末尾，并添加我已经指定的值(10)。
当前回答
在URLSearchParams文档中，有一种非常干净的方法可以做到这一点，而且不会影响历史堆栈。
// URL: https://example.com?version=1.0
const params = new URLSearchParams(location.search);
params.set('version', 2.0);
window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?version=2.0
类似地，删除参数
params.delete('version')
window.history.replaceState({}, '', `${location.pathname}?${params}`);
// URL: https://example.com?
其他回答
我写了一个小的帮助函数，它适用于任何选择。你所需要做的就是将类"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);
});
});
四年后，在我学到了很多东西之后，来回答我自己的问题。特别是你不应该对所有事情都使用jQuery。我已经创建了一个简单的模块，可以解析/stringify查询字符串。这使得修改查询字符串变得很容易。
query-string的用法如下:
// parse the query string into an object
var q = queryString.parse(location.search);
// set the `row` property
q.rows = 10;
// convert the object to a query string
// and overwrite the existing query string
location.search = queryString.stringify(q);
我的函数支持删除参数
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(/\&$/, ''));
}
我也在找同样的东西，发现:https://github.com/medialize/URI.js，这是相当不错:)
- - -更新
我找到了一个更好的包:https://www.npmjs.org/package/qs，它还处理get参数中的数组。
// usage: clear ; cd src/js/node/js-unit-tests/01-set-url-param ; npm test ; cd -
// prereqs: , nodejs , mocha
// URI = scheme:[//authority]path[?paramName1=paramValue1¶mName2=paramValue2][#fragment]
// call by: uri = uri.setUriParam("as","md")
String.prototype.setUriParam = function (paramName, paramValue) {
var uri = this
var fragment = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
uri = ( uri.indexOf('#') === -1 ) ? uri : uri.split('#')[0]
if ( uri.indexOf("?") === -1 ) { uri = uri + '?&' }
uri = uri.replace ( '?' + paramName , '?&' + paramName)
var toRepl = (paramValue != null) ? ('$1' + paramValue) : ''
var toSrch = new RegExp('([&]' + paramName + '=)(([^&#]*)?)')
uri = uri.replace(toSrch,toRepl)
if (uri.indexOf(paramName + '=') === -1 && toRepl != '' ) {
var ampersandMayBe = uri.endsWith('&') ? '' : '&'
uri = uri + ampersandMayBe + paramName + "=" + String(paramValue)
}
uri = ( fragment.length == 0 ) ? uri : (uri+"#"+fragment) //may-be re-add the fragment
return uri
}
var assert = require('assert');
describe('replacing url param value', function () {
// scheme://authority/path[?p1=v1&p2=v2#fragment
// a clean url
it('http://org.com/path -> http://org.com/path?&prm=tgt_v', function (){
var uri = 'http://site.eu:80/qto/view/devops_guide_doc'
var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
var uriActual = uri.setUriParam("bid",10)
assert.equal(uriActual, uriExpected);
});
// has the url param existing after the ? with num value
it('http://org.com/path?prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=57'
var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
var uriActual = uri.setUriParam("bid",10)
assert.equal(uriActual, uriExpected);
});
// has the url param existing after the ? but string value
it('http://org.com/path?prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=boo-bar'
var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=boo-bar-baz'
var uriActual = uri.setUriParam("bid","boo-bar-baz")
assert.equal(uriActual, uriExpected);
});
// has the url param existing after the ?& but string value
it('http://org.com/path?&prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5'
var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
var uriActual = uri.setUriParam("bid",10)
assert.equal(uriActual, uriExpected);
});
// has the url param existing after the ? with other param
it('http://org.com/path?prm=src_v&other_p=other_v -> http://org.com/path?&prm=tgt_v&other_p=other_v', function (){
var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v'
var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p=other_v'
var uriActual = uri.setUriParam("bid",10)
assert.equal(uriActual, uriExpected);
});
// has the url param existing after the ?& with other param
it('http://org.com/path?&prm=src_v&other_p=other_v -> http://org.com/path?&prm=tgt_v&other_p=other_v', function (){
var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p&other_v'
var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p&other_v'
var uriActual = uri.setUriParam("bid",10)
assert.equal(uriActual, uriExpected);
});
// has the url param existing after the ? with other param with fragment
it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v#f'
var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p=other_v#f'
var uriActual = uri.setUriParam("bid",10)
assert.equal(uriActual, uriExpected);
});
// has the url param existing after the ?& with other param with fragment
it('http://org.com/path?&prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p&other_v#f'
var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p&other_v#f'
var uriActual = uri.setUriParam("bid",10)
assert.equal(uriActual, uriExpected);
});
// remove the param-name , param-value pair
it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v#f'
var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
var uriActual = uri.setUriParam("bid",null)
assert.equal(uriActual, uriExpected);
});
// remove the param-name , param-value pair
it('http://org.com/path?&prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p=other_v#f'
var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
var uriActual = uri.setUriParam("bid",null)
assert.equal(uriActual, uriExpected);
});
// add a new param name , param value pair
it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v&bid=foo-bar#f'
var uriActual = uri.setUriParam("bid","foo-bar")
assert.equal(uriActual, uriExpected);
});
});
