我有这个网址:
site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc
我需要的是能够将 'rows' url 参数值更改为我指定的值,比如说 10。如果 'rows' 不存在,我需要将它添加到 url 的末尾并添加我已经指定的值 (10)。
我有这个网址:
site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc
我需要的是能够将 'rows' url 参数值更改为我指定的值,比如说 10。如果 'rows' 不存在,我需要将它添加到 url 的末尾并添加我已经指定的值 (10)。
我扩展了 Sujoy 的代码来组成一个函数。
/**
* http://stackoverflow.com/a/10997390/11236
*/
function updateURLParameter(url, param, paramVal){
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var additionalURL = tempArray[1];
var temp = "";
if (additionalURL) {
tempArray = additionalURL.split("&");
for (var i=0; i<tempArray.length; i++){
if(tempArray[i].split('=')[0] != param){
newAdditionalURL += temp + tempArray[i];
temp = "&";
}
}
}
var rows_txt = temp + "" + param + "=" + paramVal;
return baseURL + "?" + newAdditionalURL + rows_txt;
}
函数调用:
var newURL = updateURLParameter(window.location.href, 'locId', 'newLoc');
newURL = updateURLParameter(newURL, 'resId', 'newResId');
window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));
更新版本也处理 URL 上的锚点。
function updateURLParameter(url, param, paramVal)
{
var TheAnchor = null;
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var additionalURL = tempArray[1];
var temp = "";
if (additionalURL)
{
var tmpAnchor = additionalURL.split("#");
var TheParams = tmpAnchor[0];
TheAnchor = tmpAnchor[1];
if(TheAnchor)
additionalURL = TheParams;
tempArray = additionalURL.split("&");
for (var i=0; i<tempArray.length; i++)
{
if(tempArray[i].split('=')[0] != param)
{
newAdditionalURL += temp + tempArray[i];
temp = "&";
}
}
}
else
{
var tmpAnchor = baseURL.split("#");
var TheParams = tmpAnchor[0];
TheAnchor = tmpAnchor[1];
if(TheParams)
baseURL = TheParams;
}
if(TheAnchor)
paramVal += "#" + TheAnchor;
var rows_txt = temp + "" + param + "=" + paramVal;
return baseURL + "?" + newAdditionalURL + rows_txt;
}
4 年后,在学到了很多东西之后,回答我自己的问题。尤其是您不应该对所有事情都使用 jQuery。我创建了一个可以解析/字符串化查询字符串的简单module。这使得修改查询字符串变得容易。
您可以按如下方式使用查询字符串:
// 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);
纯 js 中的快速小解决方案,不需要插件:
function replaceQueryParam(param, newval, search) {
var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
var query = search.replace(regex, "$1").replace(/&$/, '');
return (query.length > 2 ? query + "&" : "?") + (newval ? param + "=" + newval : '');
}
像这样调用它:
window.location = '/mypage' + replaceQueryParam('rows', 55, window.location.search)
或者,如果您想停留在同一页面并替换多个参数:
var str = window.location.search
str = replaceQueryParam('rows', 55, str)
str = replaceQueryParam('cols', 'no', str)
window.location = window.location.pathname + str
编辑,感谢 Luke:要完全删除参数,请传递false
或null
为值:replaceQueryParam('rows', false, params)
。由于0
也是假的,请指定'0'
.
Ben Alman在这里有一个很好的 jquery 查询字符串/url 插件,它允许您轻松操作查询字符串。
按照要求 -
转到他的测试页面这里
在 firebug 中,在控制台中输入以下内容
jQuery.param.querystring(window.location.href, 'a=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 字符串,但您希望例如使用 document.location = newUrl 或更改锚链接等