Sin*_*hus 173 javascript url url-parsing url-parameters query-string
我有这个网址:
site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc
我需要的是能够将'rows'url param值更改为我指定的内容,比方说10.如果'rows'不存在,我需要将它添加到url的末尾并添加价值我已经指定(10).
Adi*_*lik 104
我已经扩展了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;
}
Mat*_*hen 94
我想你想要查询插件.
例如:
window.location.search = jQuery.query.set("rows", 10);
无论行的当前状态如何,这都将起作用.
red*_*are 62
Ben Alman 在这里有一个很好的jquery查询字符串/ url插件,可以让你轻松操作查询字符串.
按照要求 -
GOTO他的测试页在这里
在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或更改锚链接等
Sin*_*hus 61
4年后,在学到了很多东西之后回答我自己的问题.特别是你不应该使用jQuery.我创建了一个可以解析/字符串化查询字符串的简单模块.这样可以轻松修改查询字符串.
您可以使用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);
bro*_*son 57
纯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
编辑,谢谢卢克:要完全删除参数,传递false或null为值:replaceQueryParam('rows', false, params).既然0 也是假的,请注明'0'.
Ali*_*ter 30
一种现代的方法是使用基于原生标准的URLSearchParams.它是由所有主流浏览器的支持,除了IE他们polyfills其中可用
const paramsString = "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc"
const searchParams = new URLSearchParams(paramsString);
searchParams.set('rows', 10);
console.log(searchParams.toString()); // return modified string.
Pos*_*sto 27
你也可以通过普通的JS来做到这一点
var url = document.URL
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var aditionalURL = tempArray[1];
var temp = "";
if(aditionalURL)
{
var tempArray = aditionalURL.split("&");
for ( var i in tempArray ){
if(tempArray[i].indexOf("rows") == -1){
newAdditionalURL += temp+tempArray[i];
temp = "&";
}
}
}
var rows_txt = temp+"rows=10";
var finalURL = baseURL+"?"+newAdditionalURL+rows_txt;
Tje*_*rkW 13
这是更改URL参数的现代方法：
function setGetParam(key,value) {
if (history.pushState) {
var params = new URLSearchParams(window.location.search);
params.set(key, value);
var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + params.toString();
window.history.pushState({path:newUrl},'',newUrl);
}
}
Har*_*ime 10
String操作的可行替代方法是设置html form并只修改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字符串更好.
Onk*_*kar 10
使用URLSearchParams到check， get并且set参数值成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));
// if you want to append into URL without reloading the page
url.search = url.searchParams;
url = url.toString();
history.pushState({}, null, url);
// want to reload the window with new param
window.location = url;
2020 解决方案：如果传递null或传递undefined值，则设置变量或删除 iti 。
var setSearchParam = function(key, value) {
if (!window.history.pushState) {
return;
}
if (!key) {
return;
}
var url = new URL(window.location.href);
var params = new window.URLSearchParams(window.location.search);
if (value === undefined || value === null) {
params.delete(key);
} else {
params.set(key, value);
}
url.search = params;
url = url.toString();
window.history.replaceState({url: url}, null, url);
}
可以使用 URLSearchParams 和 History 接口轻松修改 URL 查询参数：
// 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
小智 7
您可以使用我的库来完成这项工作: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);
考虑这个：
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）