我有这个URL:
site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc
我需要的是能够改变'行' url参数值我指定的东西，让我们说10。如果“行”不存在，我需要将它添加到url的末尾，并添加我已经指定的值(10)。
当前回答
您可以使用我的这个库来完成这项工作: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);
其他回答
// 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);
});
});
你也可以通过普通的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;
我写了一个小的帮助函数，它适用于任何选择。你所需要做的就是将类"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);
});
});
我也在找同样的东西，发现:https://github.com/medialize/URI.js，这是相当不错:)
- - -更新
我找到了一个更好的包:https://www.npmjs.org/package/qs，它还处理get参数中的数组。
使用javascript URL:
var url = new URL(window.location);
(url.searchParams.has('rows') ? url.searchParams.set('rows', rows) : url.searchParams.append('rows', rows));
window.location = url;
