In a web application that makes use of AJAX calls, I need to submit a request but add a parameter to the end of the URL, for example:
Original URL:
Resulting URL:
http://server/myapp.php?id=10&enabled=true
Looking for a JavaScript function which parses the URL looking at each parameter, then adds the new parameter or updates the value if one already exists.
Answers:
A basic implementation which you'll need to adapt would look something like this:
function insertParam(key, value) {
key = encodeURIComponent(key);
value = encodeURIComponent(value);
// kvp looks like ['key1=value1', 'key2=value2', ...]
var kvp = document.location.search.substr(1).split('&');
let i=0;
for(; i<kvp.length; i++){
if (kvp[i].startsWith(key + '=')) {
let pair = kvp[i].split('=');
pair[1] = value;
kvp[i] = pair.join('=');
break;
}
}
if(i >= kvp.length){
kvp[kvp.length] = [key,value].join('=');
}
// can return this or...
let params = kvp.join('&');
// reload page with new params
document.location.search = params;
}
This is approximately twice as fast as a regex or search based solution, but that depends completely on the length of the querystring and the index of any match
the slow regex method I benchmarked against for completions sake (approx +150% slower)
function insertParam2(key,value)
{
key = encodeURIComponent(key); value = encodeURIComponent(value);
var s = document.location.search;
var kvp = key+'='+value;
var r = new RegExp('(&|\?)'+key+'=[^&]*');
s = s.replace(r,'$1'+kvp);
if(!RegExp.$1) {s += (s.length>0 ? '&' : '?') + kvp;};
//again, do what you will here
document.location.search = s;
}
Answers:
This was my own attempt, but I'll use the answer by annakata as it seems much cleaner:
function AddUrlParameter(sourceUrl, parameterName, parameterValue, replaceDuplicates)
{
if ((sourceUrl == null) || (sourceUrl.length == 0)) sourceUrl = document.location.href;
var urlParts = sourceUrl.split('?');
var newQueryString = '';
if (urlParts.length > 1)
{
var parameters = urlParts[1].split('&');
for (var i=0; (i < parameters.length); i++)
{
var parameterParts = parameters[i].split('=');
if (!(replaceDuplicates && parameterParts[0] == parameterName))
{
if (newQueryString == '')
newQueryString = '?';
else
newQueryString += '&';
newQueryString += parameterParts[0] + '=' + parameterParts[1];
}
}
}
if (newQueryString == '')
newQueryString = '?';
else
newQueryString += '&';
newQueryString += parameterName + '=' + parameterValue;
return urlParts[0] + newQueryString;
}
Also, I found this jQuery plugin from another post on stackoverflow, and if you need more flexibility you could use that: http://plugins.jquery.com/project/query-object
I would think the code would be (haven't tested):
return $.query.parse(sourceUrl).set(parameterName, parameterValue).toString();
Answers:
I have a 'class' that does this and here it is:
function QS(){
this.qs = {};
var s = location.search.replace( /^?|#.*$/g, '' );
if( s ) {
var qsParts = s.split('&');
var i, nv;
for (i = 0; i < qsParts.length; i++) {
nv = qsParts[i].split('=');
this.qs[nv[0]] = nv[1];
}
}
}
QS.prototype.add = function( name, value ) {
if( arguments.length == 1 && arguments[0].constructor == Object ) {
this.addMany( arguments[0] );
return;
}
this.qs[name] = value;
}
QS.prototype.addMany = function( newValues ) {
for( nv in newValues ) {
this.qs[nv] = newValues[nv];
}
}
QS.prototype.remove = function( name ) {
if( arguments.length == 1 && arguments[0].constructor == Array ) {
this.removeMany( arguments[0] );
return;
}
delete this.qs[name];
}
QS.prototype.removeMany = function( deleteNames ) {
var i;
for( i = 0; i < deleteNames.length; i++ ) {
delete this.qs[deleteNames[i]];
}
}
QS.prototype.getQueryString = function() {
var nv, q = [];
for( nv in this.qs ) {
q[q.length] = nv+'='+this.qs[nv];
}
return q.join( '&' );
}
QS.prototype.toString = QS.prototype.getQueryString;
//examples
//instantiation
var qs = new QS;
alert( qs );
//add a sinle name/value
qs.add( 'new', 'true' );
alert( qs );
//add multiple key/values
qs.add( { x: 'X', y: 'Y' } );
alert( qs );
//remove single key
qs.remove( 'new' )
alert( qs );
//remove multiple keys
qs.remove( ['x', 'bogus'] )
alert( qs );
I have overridden the toString method so there is no need to call QS::getQueryString, you can use QS::toString or, as I have done in the examples just rely on the object being coerced into a string.
Answers:
Ok here I compare Two functions, one made by myself (regExp) and another one made by (annakata).
Split array:
function insertParam(key, value)
{
key = escape(key); value = escape(value);
var kvp = document.location.search.substr(1).split('&');
var i=kvp.length; var x; while(i--)
{
x = kvp[i].split('=');
if (x[0]==key)
{
x[1] = value;
kvp[i] = x.join('=');
break;
}
}
if(i<0) {kvp[kvp.length] = [key,value].join('=');}
//this will reload the page, it's likely better to store this until finished
return '&'+kvp.join('&');
}
Regexp method:
function addParameter(param, value)
{
var regexp = new RegExp('(\?|\&)' + param + '\=([^\&]*)(\&|$)');
if (regexp.test(document.location.search))
return (document.location.search.toString().replace(regexp, function(a, b, c, d)
{
return (b + param + '=' + value + d);
}));
else
return document.location.search+ param + '=' + value;
}
Testing case:
time1=(new Date).getTime();
for (var i=0;i<10000;i++)
{
addParameter('test','test');
}
time2=(new Date).getTime();
for (var i=0;i<10000;i++)
{
insertParam('test','test');
}
time3=(new Date).getTime();
console.log((time2-time1)+' '+(time3-time2));
It seems that even with simplest solution (when regexp use only test and do not enter .replace function) it is still slower than spliting... Well. Regexp is kinda slow but... uhh...
Answers:
Thank you all for your contribution. I used annakata code and modified to also include the case where there is no query string in the url at all. Hope this would help.
function insertParam(key, value) {
key = escape(key); value = escape(value);
var kvp = document.location.search.substr(1).split('&');
if (kvp == '') {
document.location.search = '?' + key + '=' + value;
}
else {
var i = kvp.length; var x; while (i--) {
x = kvp[i].split('=');
if (x[0] == key) {
x[1] = value;
kvp[i] = x.join('=');
break;
}
}
if (i < 0) { kvp[kvp.length] = [key, value].join('='); }
//this will reload the page, it's likely better to store this until finished
document.location.search = kvp.join('&');
}
}
Answers:
Here's a vastly simplified version, making tradeoffs for legibility and fewer lines of code instead of micro-optimized performance (and we're talking about a few miliseconds difference, realistically... due to the nature of this (operating on the current document's location), this will most likely be ran once on a page).
/**
* Add a URL parameter (or changing it if it already exists)
* @param {search} string this is typically document.location.search
* @param {key} string the key to set
* @param {val} string value
*/
var addUrlParam = function(search, key, val){
var newParam = key + '=' + val,
params = '?' + newParam;
// If the 'search' string exists, then build params from it
if (search) {
// Try to replace an existance instance
params = search.replace(new RegExp('([?&])' + key + '[^&]*'), '$1' + newParam);
// If nothing was replaced, then add the new param to the end
if (params === search) {
params += '&' + newParam;
}
}
return params;
};
You would then use this like so:
document.location.pathname + addUrlParam(document.location.search, 'foo', 'bar');
Answers:
This is very simple solution. Its doesn't control parameter existence, and it doesn't change existing value. It adds your parameter to end, so you can get latest value in your back-end code.
function addParameterToURL(param){
_url = location.href;
_url += (_url.split('?')[1] ? '&':'?') + param;
return _url;
}
Answers:
I like the answer of Mehmet Fatih Yıldız even he did not answer the whole question.
In the same line as his answer, I use this code:
'Its doesn't control parameter existence, and it doesn't change existing value. It adds your parameter to the end'
/** add a parameter at the end of the URL. Manage '?'/'&', but not the existing parameters.
* does escape the value (but not the key)
*/
function addParameterToURL(_url,_key,_value){
var param = _key+'='+escape(_value);
var sep = '&';
if (_url.indexOf('?') < 0) {
sep = '?';
} else {
var lastChar=_url.slice(-1);
if (lastChar == '&') sep='';
if (lastChar == '?') sep='';
}
_url += sep + param;
return _url;
}
and the tester:
/*
function addParameterToURL_TESTER_sub(_url,key,value){
//log(_url);
log(addParameterToURL(_url,key,value));
}
function addParameterToURL_TESTER(){
log('-------------------');
var _url ='www.google.com';
addParameterToURL_TESTER_sub(_url,'key','value');
addParameterToURL_TESTER_sub(_url,'key','Text Value');
_url ='www.google.com?';
addParameterToURL_TESTER_sub(_url,'key','value');
_url ='www.google.com?A=B';
addParameterToURL_TESTER_sub(_url,'key','value');
_url ='www.google.com?A=B&';
addParameterToURL_TESTER_sub(_url,'key','value');
_url ='www.google.com?A=1&B=2';
addParameterToURL_TESTER_sub(_url,'key','value');
}//*/
Answers:
var MyApp = new Class();
MyApp.extend({
utility: {
queryStringHelper: function (url) {
var originalUrl = url;
var newUrl = url;
var finalUrl;
var insertParam = function (key, value) {
key = escape(key);
value = escape(value);
//The previous post had the substr strat from 1 in stead of 0!!!
var kvp = newUrl.substr(0).split('&');
var i = kvp.length;
var x;
while (i--) {
x = kvp[i].split('=');
if (x[0] == key) {
x[1] = value;
kvp[i] = x.join('=');
break;
}
}
if (i < 0) {
kvp[kvp.length] = [key, value].join('=');
}
finalUrl = kvp.join('&');
return finalUrl;
};
this.insertParameterToQueryString = insertParam;
this.insertParams = function (keyValues) {
for (var keyValue in keyValues[0]) {
var key = keyValue;
var value = keyValues[0][keyValue];
newUrl = insertParam(key, value);
}
return newUrl;
};
return this;
}
}
});
Answers:
/**
* Add a URL parameter
* @param {string} url
* @param {string} param the key to set
* @param {string} value
*/
var addParam = function(url, param, value) {
param = encodeURIComponent(param);
var a = document.createElement('a');
param += (value ? '=' + encodeURIComponent(value) : '');
a.href = url;
a.search += (a.search ? '&' : '') + param;
return a.href;
}
/**
* Add a URL parameter (or modify if already exists)
* @param {string} url
* @param {string} param the key to set
* @param {string} value
*/
var addOrReplaceParam = function(url, param, value) {
param = encodeURIComponent(param);
var r = '([&?]|&)' + param + '\b(?:=(?:[^&#]*))*';
var a = document.createElement('a');
var regex = new RegExp(r);
var str = param + (value ? '=' + encodeURIComponent(value) : '');
a.href = url;
var q = a.search.replace(regex, '$1'+str);
if (q === a.search) {
a.search += (a.search ? '&' : '') + str;
} else {
a.search = q;
}
return a.href;
}
url = 'http://www.example.com#hashme';
newurl = addParam(url, 'ciao', '1');
alert(newurl);And please note that parameters should be encoded before being appended in query string.
Answers:
If you're messing around with urls in links or somewhere else, you may have to take the hash into account as well. Here's a fairly simple to understand solution. Probably not the FASTEST since it uses a regex... but in 99.999% of cases, the difference really doesn't matter!
function addQueryParam( url, key, val ){
var parts = url.match(/([^?#]+)(?[^#]*)?(#.*)?/);
var url = parts[1];
var qs = parts[2] || '';
var hash = parts[3] || '';
if ( !qs ) {
return url + '?' + key + '=' + encodeURIComponent( val ) + hash;
} else {
var qs_parts = qs.substr(1).split('&');
var i;
for (i=0;i<qs_parts.length;i++) {
var qs_pair = qs_parts[i].split('=');
if ( qs_pair[0] == key ){
qs_parts[ i ] = key + '=' + encodeURIComponent( val );
break;
}
}
if ( i == qs_parts.length ){
qs_parts.push( key + '=' + encodeURIComponent( val ) );
}
return url + '?' + qs_parts.join('&') + hash;
}
}
Answers:
Check out https://github.com/derek-watson/jsUri
Uri and query string manipulation in javascript.
This project incorporates the excellent parseUri regular expression library by Steven Levithan. You can safely parse URLs of all shapes and sizes, however invalid or hideous.
Answers:
I would go with this small but complete library to handle urls in js:
https://github.com/Mikhus/jsurl
Answers:
Here is what I do. Using my editParams() function, you can add, remove, or change any parameter, then use the built in replaceState() function to update the URL:
window.history.replaceState('object or string', 'Title', 'page.html' + editParams('enable', 'true'));
// 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;
}
Answers:
Sometime we see ? at the end URL, i found some solutions which generate results as file.php?&foo=bar. i came up with my own solution work perfectly as i want!
location.origin + location.pathname + location.search + (location.search=='' ? '?' : '&') + 'lang=ar'
Note: location.origin doesn't work in IE, here is its fix.
Answers:
This is what I use when it comes to some basic url param additions or updates on the server-side like Node.js.
CoffeScript:
###
@method addUrlParam Adds parameter to a given url. If the parameter already exists in the url is being replaced.
@param {string} url
@param {string} key Parameter's key
@param {string} value Parameter's value
@returns {string} new url containing the parameter
###
addUrlParam = (url, key, value) ->
newParam = key+'='+value
result = url.replace(new RegExp('(&|\?)' + key + '=[^&|#]*'), '$1' + newParam)
if result is url
result = if url.indexOf('?') != -1 then url.split('?')[0] + '?' + newParam + '&' + url.split('?')[1]
else if url.indexOf('#') != -1 then url.split('#')[0] + '?' + newParam + '#' + url.split('#')[1]
else url + '?' + newParam
return resultJavaScript:
function addUrlParam(url, key, value) {
var newParam = key+'='+value;
var result = url.replace(new RegExp('(&|\?)'+key+'=[^&|#]*'), '$1' + newParam);
if (result === url) {
result = (url.indexOf('?') != -1 ? url.split('?')[0]+'?'+newParam+'&'+url.split('?')[1]
: (url.indexOf('#') != -1 ? url.split('#')[0]+'?'+newParam+'#'+ url.split('#')[1]
: url+'?'+newParam));
}
return result;
}
var url = 'http://www.example.com?foo=bar&ciao=3&doom=5#hashme';
result1.innerHTML = addUrlParam(url, 'ciao', '1');<p id='result1'></p>Answers:
If you have a string with url that you want to decorate with a param, you could try this:
urlstring += ( urlstring.match( /[?]/g ) ? '&' : '?' ) + 'param=value';
This means that ? will be the prefix of the parameter, but if you already have ? in urlstring, than & will be the prefix.
I would also recommend to do encodeURI( paramvariable ) if you didn't hardcoded parameter, but it is inside a paramvariable; or if you have funny characters in it.
See javascript URL Encoding for usage of the encodeURI function.
Answers:
Following function will help you to add,update and delete parameters to or from URL.
//example1and
var myURL = '/search';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search
//example2
var myURL = '/search?category=mobile';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile
//example3
var myURL = '/search?location=texas';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search
//example4
var myURL = '/search?category=mobile&location=texas';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile
//example5
var myURL = 'https://example.com/search?location=texas#fragment';
myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california#fragment
myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york#fragment
myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search#fragment
Here is the function.
function updateUrl(url,key,value){
if(value!==undefined){
value = encodeURI(value);
}
var hashIndex = url.indexOf('#')|0;
if (hashIndex === -1) hashIndex = url.length|0;
var urls = url.substring(0, hashIndex).split('?');
var baseUrl = urls[0];
var parameters = '';
var outPara = {};
if(urls.length>1){
parameters = urls[1];
}
if(parameters!==''){
parameters = parameters.split('&');
for(k in parameters){
var keyVal = parameters[k];
keyVal = keyVal.split('=');
var ekey = keyVal[0];
var evalue = '';
if(keyVal.length>1){
evalue = keyVal[1];
}
outPara[ekey] = evalue;
}
}
if(value!==undefined){
outPara[key] = value;
}else{
delete outPara[key];
}
parameters = [];
for(var k in outPara){
parameters.push(k + '=' + outPara[k]);
}
var finalUrl = baseUrl;
if(parameters.length>0){
finalUrl += '?' + parameters.join('&');
}
return finalUrl + url.substring(hashIndex);
}
Answers:
The simplest solution I can think of is this method, which will return the modified URI. I feel like most of you are working way too hard.
function setParam(uri, key, val) {
return uri
.replace(new RegExp('([?&]'+key+'(?=[=&#]|$)[^#&]*|(?=#|$))'), '&'+key+'='+encodeURIComponent(val))
.replace(/^([^?&]+)&/, '$1?');
}
Answers:
As best I can tell none of the above answers address the case where the query string contains parameters which are themselves an array and hence will appear more than once, e.g:
http://example.com?sizes[]=a&sizes[]=b
The following function is what I wrote to update document.location.search. It takes an array of key/value pair arrays as an argument and it will return a revised version of the latter which you can do whatever you'd like with. I'm using it like this:
var newParams = [
['test','123'],
['best','456'],
['sizes[]','XXL']
];
var newUrl = document.location.pathname + insertParams(newParams);
history.replaceState('', '', newUrl);
If the current url was:
http://example.com/index.php?test=replaceme&sizes[]=XL
This would get you
http://example.com/index.php?test=123&sizes[]=XL&sizes[]=XXL&best=456
Function
function insertParams(params) {
var result;
var ii = params.length;
var queryString = document.location.search.substr(1);
var kvps = queryString ? queryString.split('&') : [];
var kvp;
var skipParams = [];
var i = kvps.length;
while (i--) {
kvp = kvps[i].split('=');
if (kvp[0].slice(-2) != '[]') {
var ii = params.length;
while (ii--) {
if (params[ii][0] == kvp[0]) {
kvp[1] = params[ii][1];
kvps[i] = kvp.join('=');
skipParams.push(ii);
}
}
}
}
var ii = params.length;
while (ii--) {
if (skipParams.indexOf(ii) === -1) {
kvps.push(params[ii].join('='));
}
}
result = kvps.length ? '?' + kvps.join('&') : '';
return result;
}
Answers:
You can use one of these:
- https://developer.mozilla.org/en-US/docs/Web/API/URL
- https://developer.mozilla.org/en/docs/Web/API/URLSearchParams
Example:
var url = new URL('http://foo.bar/?x=1&y=2');
// If your expected result is 'http://foo.bar/?x=1&y=2&x=42'
url.searchParams.append('x', 42);
// If your expected result is 'http://foo.bar/?x=42&y=2'
url.searchParams.set('x', 42);
Answers:
Easiest solution, works if you have already a tag or not, and removes it automatically so it wont keep adding equal tags, have fun
function changeURL(tag)
{
if(window.location.href.indexOf('?') > -1) {
if(window.location.href.indexOf('&'+tag) > -1){
var url = window.location.href.replace('&'+tag,'')+'&'+tag;
}
else
{
var url = window.location.href+'&'+tag;
}
}else{
if(window.location.href.indexOf('?'+tag) > -1){
var url = window.location.href.replace('?'+tag,'')+'?'+tag;
}
else
{
var url = window.location.href+'?'+tag;
}
}
window.location = url;
}
THEN
changeURL('i=updated');
Answers:
This is a simple way to add a query parameter:
const query = new URLSearchParams(window.location.search);
query.append('enabled', 'true');
And that is it more here.
Please note the support specs.
Answers:
Try
The regular expressions, so slow, thus:
var SetParamUrl = function(_k, _v) {// replace and add new parameters
let arrParams = window.location.search !== '' ? decodeURIComponent(window.location.search.substr(1)).split('&').map(_v => _v.split('=')) : Array();
let index = arrParams.findIndex((_v) => _v[0] === _k);
index = index !== -1 ? index : arrParams.length;
_v === null ? arrParams = arrParams.filter((_v, _i) => _i != index) : arrParams[index] = [_k, _v];
let _search = encodeURIComponent(arrParams.map(_v => _v.join('=')).join('&'));
let newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + (arrParams.length > 0 ? '?' + _search : '');
// window.location = newurl; //reload
if (history.pushState) { // without reload
window.history.pushState({path:newurl}, null, newurl);
}
};
var GetParamUrl = function(_k) {// get parameter by key
let sPageURL = decodeURIComponent(window.location.search.substr(1)),
sURLVariables = sPageURL.split('&').map(_v => _v.split('='));
let _result = sURLVariables.find(_v => _v[0] === _k);
return _result[1];
};
Example:
// https://some.com/some_path
GetParamUrl('cat');//undefined
SetParamUrl('cat', 'strData');// https://some.com/some_path?cat=strData
GetParamUrl('cat');//strData
SetParamUrl('sotr', 'strDataSort');// https://some.com/some_path?cat=strData&sotr=strDataSort
GetParamUrl('sotr');//strDataSort
SetParamUrl('cat', 'strDataTwo');// https://some.com/some_path?cat=strDataTwo&sotr=strDataSort
GetParamUrl('cat');//strDataTwo
//remove param
SetParamUrl('cat', null);// https://some.com/some_path?sotr=strDataSort
Answers:
With the new achievements in JS here is how one can add query param to the URL:
var protocol = window.location.protocol,
host = '//' + window.location.host,
path = window.location.pathname,
query = window.location.search;
var newUrl = protocol + host + path + query + (query ? '&' : '?') + 'param=1';
window.history.pushState({path:newUrl}, '' , newUrl);
Also see this possibility Moziila URLSearchParams.append()
Answers:
This will work in all modern browsers.
function insertParam(key,value) {
if (history.pushState) {
var newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + '?' +key+'='+value;
window.history.pushState({path:newurl},'',newurl);
}
}
Answers:
Vianney Bajart's answer is correct; however, URL will only work if you have the complete URL with port, host, path and query:
new URL('http://server/myapp.php?id=10&enabled=true')
And URLSearchParams will only work if you pass only the query string:
new URLSearchParams('?id=10&enabled=true')
If you have an incomplete or relative URL and don't care for the base URL, you can just split by ? to get the query string and join later like this:
function setUrlParams(url, key, value) {
url = url.split('?');
usp = new URLSearchParams(url[1]);
usp.set(key, value);
url[1] = usp.toString();
return url.join('?');
}
let url = 'myapp.php?id=10';
url = setUrlParams(url, 'enabled', true); // url = 'myapp.php?id=10&enabled=true'
url = setUrlParams(url, 'id', 11); // url = 'myapp.php?id=11&enabled=true'
Not compatible with Internet Explorer.
Answers:
Adding to @Vianney's Answer https://stackoverflow.com/a/44160941/6609678
We can import the Built-in URL module in node as follows
const { URL } = require('url');
Example:
Terminal $ node
> const { URL } = require('url');
undefined
> let url = new URL('', 'http://localhost:1989/v3/orders');
undefined
> url.href
'http://localhost:1989/v3/orders'
> let fetchAll=true, timePeriod = 30, b2b=false;
undefined
> url.href
'http://localhost:1989/v3/orders'
> url.searchParams.append('fetchAll', fetchAll);
undefined
> url.searchParams.append('timePeriod', timePeriod);
undefined
> url.searchParams.append('b2b', b2b);
undefined
> url.href
'http://localhost:1989/v3/orders?fetchAll=true&timePeriod=30&b2b=false'
> url.toString()
'http://localhost:1989/v3/orders?fetchAll=true&timePeriod=30&b2b=false'
Useful Links:
https://developer.mozilla.org/en-US/docs/Web/API/URL https://developer.mozilla.org/en/docs/Web/API/URLSearchParams
Answers:
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('order', 'date');
window.location.search = urlParams;
.set first agrument is the key, the second one is the value.
Answers:
Reset all query string
var params = { params1:'val1', params2:'val2' };
let str = jQuery.param(params);
let uri = window.location.href.toString();
if (uri.indexOf('?') > 0)
uri = uri.substring(0, uri.indexOf('?'));
console.log(uri+'?'+str);
//window.location.href = uri+'?'+str;<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>Answers:
Try this.
// uses the URL class
function setParam(key, value) {
let url = new URL(window.document.location);
let params = new URLSearchParams(url.search.slice(1));
if (params.has(key)) {
params.set(key, value);
}else {
params.append(key, value);
}
}
Answers:
It handles such URL's:
- empty
- doesn't have any parameters
- already have some parameters
- have
?at the end, but at the same time doesn't have any parameters
It doesn't handles such URL's:
- with fragment identifier (i.e. hash, #)
- if URL already have required query parameter (then there will be duplicate)
Works in:
- Chrome 32+
- Firefox 26+
- Safari 7.1+
function appendQueryParameter(url, name, value) {
if (url.length === 0) {
return;
}
let rawURL = url;
// URL with `?` at the end and without query parameters
// leads to incorrect result.
if (rawURL.charAt(rawURL.length - 1) === "?") {
rawURL = rawURL.slice(0, rawURL.length - 1);
}
const parsedURL = new URL(rawURL);
let parameters = parsedURL.search;
parameters += (parameters.length === 0) ? "?" : "&";
parameters = (parameters + name + "=" + value);
return (parsedURL.origin + parsedURL.pathname + parameters);
}
Version with ES6 template strings.
Works in:
- Chrome 41+
- Firefox 32+
- Safari 9.1+
function appendQueryParameter(url, name, value) {
if (url.length === 0) {
return;
}
let rawURL = url;
// URL with `?` at the end and without query parameters
// leads to incorrect result.
if (rawURL.charAt(rawURL.length - 1) === "?") {
rawURL = rawURL.slice(0, rawURL.length - 1);
}
const parsedURL = new URL(rawURL);
let parameters = parsedURL.search;
parameters += (parameters.length === 0) ? "?" : "&";
parameters = `${parameters}${name}=${value}`;
return `${parsedURL.origin}${parsedURL.pathname}${parameters}`;
}
No comments:
Post a Comment