更改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) ：要完全删除参数，传递false或null ： replaceQueryParam('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它也处理数组中的获取参数。
