更改url参数

我有这个url:

site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc 

我需要的是能够改变'行'url参数值我指定的东西,让说10,如果'行'不存在,我需要将其添加到URL的末尾,并添加我已经指定的价值(10)。

我想你想要的查询插件 。

例如:

 window.location.search = jQuery.query.set("rows", 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; } 

Ben Alman 在这里有一个很好的jquery querystring / url插件,可以让你轻松地操纵查询string。

按照要求 –

转到他的testing页面

在萤火虫中input以下内容到控制台

jQuery.param.querystring(window.location.href, 'a=3&newValue=100');

它会返回你以下修改后的urlstring

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

注意一个查询string的值已经从X变成了3,并且添加了新的值。

然后,你可以使用新的urlstring,但是你希望例如使用document.location = newUrl或更改一个锚链接等

四年后回答我自己的问题,经过了解了很多。 特别是你不应该使用jQuery的一切。 我创build了一个简单的模块,可以parsing/string查询string。 这可以很容易地修改查询string。

您可以使用查询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); 

在纯js快速小解决scheme,无需插件:

 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) 

或者,如果您想保留在同一页面上并replace多个参数:

  var str = window.location.search str = replaceQueryParam('rows', 55, str) str = replaceQueryParam('cols', 'no', str) window.location = window.location.pathname + str 

编辑, replaceQueryParam('rows', false, params) :要完全删除参数,传递falsenullreplaceQueryParam('rows', false, params) 。 由于0 也是虚的 ,请指定'0'

你也可以通过普通的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; 

一个现代的方法是使用基于本地标准的URLSearchParams 。 对于较老的浏览器,可以使用polyfills

 const paramsString = "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc" const searchParams = new URLSearchParams(paramsString); searchParams.set('rows', 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(); 

可能不适合所有情况,但可能比parsingURLstring更好。

你可以用我的图书馆来完成这个工作: 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); 

我写了一个辅助函数,可以和任何select一起使用。 所有你需要做的就是将类“redirectOnChange”添加到任何select元素,这将导致页面重新加载一个新的/改变的查询string参数,等于select的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); }); }); 

在这里,我已经采取了阿迪尔马利克的答案,并确定了我所确定的3个问题。

 /** * Adds or updates a URL parameter. * * @param {string} url the URL to modify * @param {string} param the name of the parameter * @param {string} paramVal the new value for the parameter * @return {string} the updated URL */ self.setParameter = function (url, param, paramVal){ // http://stackoverflow.com/a/10997390/2391566 var parts = url.split('?'); var baseUrl = parts[0]; var oldQueryString = parts[1]; var newParameters = []; if (oldQueryString) { var oldParameters = oldQueryString.split('&'); for (var i = 0; i < oldParameters.length; i++) { if(oldParameters[i].split('=')[0] != param) { newParameters.push(oldParameters[i]); } } } if (paramVal !== '' && paramVal !== null && typeof paramVal !== 'undefined') { newParameters.push(param + '=' + encodeURI(paramVal)); } if (newParameters.length > 0) { return baseUrl + '?' + newParameters.join('&'); } else { return baseUrl; } } 

Sujoy的答案的另一个变化。 只是改变了variables名称并添加了一个名称空间包装器:

 window.MyNamespace = window.MyNamespace || {}; window.MyNamespace.Uri = window.MyNamespace.Uri || {}; (function (ns) { ns.SetQueryStringParameter = function(url, parameterName, parameterValue) { var otherQueryStringParameters = ""; var urlParts = url.split("?"); var baseUrl = urlParts[0]; var queryString = urlParts[1]; var itemSeparator = ""; if (queryString) { var queryStringParts = queryString.split("&"); for (var i = 0; i < queryStringParts.length; i++){ if(queryStringParts[i].split('=')[0] != parameterName){ otherQueryStringParameters += itemSeparator + queryStringParts[i]; itemSeparator = "&"; } } } var newQueryStringParameter = itemSeparator + parameterName + "=" + parameterValue; return baseUrl + "?" + otherQueryStringParameters + newQueryStringParameter; }; })(window.MyNamespace.Uri); 

用户现在是:

 var changedUrl = MyNamespace.Uri.SetQueryStringParameter(originalUrl, "CarType", "Ford"); 

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

这是一个使用的例子。

 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 

这是我做的。 使用我的editParams()函数,可以添加,删除或更改任何参数,然后使用内置的replaceState()函数更新URL:

 window.history.replaceState('object or string', 'Title', 'page.html' + editParams('sorting', ModifiedTimeAsc)); // background functions below: // add/change/remove URL parameter // use a value of false to remove parameter // returns a url-style string function editParams (key, value) { key = encodeURI(key); var params = getSearchParameters(); if (Object.keys(params).length === 0) { if (value !== false) return '?' + key + '=' + encodeURI(value); else return ''; } if (value !== false) params[key] = encodeURI(value); else delete params[key]; if (Object.keys(params).length === 0) return ''; return '?' + $.map(params, function (value, key) { return key + '=' + value; }).join('&'); } // Get object/associative array of URL parameters function getSearchParameters () { var prmstr = window.location.search.substr(1); return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {}; } // convert parameters from url-style string to associative array function transformToAssocArray (prmstr) { var params = {}, prmarr = prmstr.split("&"); for (var i = 0; i < prmarr.length; i++) { var tmparr = prmarr[i].split("="); params[tmparr[0]] = tmparr[1]; } return params; } 

我正在寻找相同的东西,发现: https : //github.com/medialize/URI.js这是相当不错的:)

– 更新

我发现了一个更好的包: https : //www.npmjs.org/package/qs它也处理数组中的获取参数。