Develop Reference

Remove URL parameters on button click JQuery/JavaScript [duplicate]

I am trying to remove everything after the "?" in the browser url on document ready.
Here is what I am trying:
jQuery(document).ready(function($) {
var url = window.location.href;
url = url.split('?')[0];
});
I can do this and see it the below works:
jQuery(document).ready(function($) {
var url = window.location.href;
alert(url.split('?')[0]);
});

TL;DR
1- To modify current URL and add / inject it (the new modified URL) as a new URL entry to history list, use pushState:
window.history.pushState({}, document.title, "/" + "my-new-url.html");
2- To replace current URL without adding it to history entries, use replaceState:
window.history.replaceState({}, document.title, "/" + "my-new-url.html");
3- Depending on your business logic, pushState will be useful in cases such as:
you want to support the browser's back button
you want to create a new URL, add/insert/push the new URL to history entries, and make it current URL
allowing users to bookmark the page with the same parameters (to show the same contents)
to programmatically access the data through the stateObj then parse from the anchor
As I understood from your comment, you want to clean your URL without redirecting again.
Note that you cannot change the whole URL. You can just change what comes after the domain's name. This means that you cannot change www.example.com/ but you can change what comes after .com/
www.example.com/old-page-name => can become => www.example.com/myNewPaage20180322.php
Background
We can use:
1- The pushState() method if you want to add a new modified URL to history entries.
2- The replaceState() method if you want to update/replace current history entry.
.replaceState() operates exactly like .pushState() except that .replaceState() modifies the current history entry instead of creating a new one. Note that this doesn't prevent the creation of a new entry in the global browser history.
.replaceState() is particularly useful when you want to update the
state object or URL of the current history entry in response to some
user action.
Code
To do that I will use The pushState() method for this example which works similarly to the following format:
var myNewURL = "my-new-URL.php";//the new URL
window.history.pushState("object or string", "Title", "/" + myNewURL );
Feel free to replace pushState with replaceState based on your requirements.
You can substitute the paramter "object or string" with {} and "Title" with document.title so the final statment will become:
window.history.pushState({}, document.title, "/" + myNewURL );
Results
The previous two lines of code will make a URL such as:
https://domain.tld/some/randome/url/which/will/be/deleted/
To become:
https://domain.tld/my-new-url.php
Action
Now let's try a different approach. Say you need to keep the file's name. The file name comes after the last / and before the query string ?.
http://www.someDomain.com/really/long/address/keepThisLastOne.php?name=john
Will be:
http://www.someDomain.com/keepThisLastOne.php
Something like this will get it working:
//fetch new URL
//refineURL() gives you the freedom to alter the URL string based on your needs.
var myNewURL = refineURL();
//here you pass the new URL extension you want to appear after the domains '/'. Note that the previous identifiers or "query string" will be replaced.
window.history.pushState("object or string", "Title", "/" + myNewURL );
//Helper function to extract the URL between the last '/' and before '?'
//If URL is www.example.com/one/two/file.php?user=55 this function will return 'file.php'
//pseudo code: edit to match your URL settings
function refineURL()
{
//get full URL
var currURL= window.location.href; //get current address
//Get the URL between what's after '/' and befor '?'
//1- get URL after'/'
var afterDomain= currURL.substring(currURL.lastIndexOf('/') + 1);
//2- get the part before '?'
var beforeQueryString= afterDomain.split("?")[0];
return beforeQueryString;
}
UPDATE:
For one liner fans, try this out in your console/firebug and this page URL will change:
window.history.pushState("object or string", "Title", "/"+window.location.href.substring(window.location.href.lastIndexOf('/') + 1).split("?")[0]);
This page URL will change from:
http://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page/22753103#22753103
To
http://stackoverflow.com/22753103#22753103
Note: as Samuel Liew indicated in the comments below, this feature has been introduced only for HTML5.
An alternative approach would be to actually redirect your page (but you will lose the query string `?', is it still needed or the data has been processed?).
window.location.href = window.location.href.split("?")[0]; //"http://www.newurl.com";
Note 2:
Firefox seems to ignore window.history.pushState({}, document.title, ''); when the last argument is an empty string. Adding a slash ('/') worked as expected and removed the whole query part of the url string.
Chrome seems to be fine with an empty string.

These are all misleading, you never want to add to the browser history unless you want to go to a different page in a single page app. If you want to remove the parameters without a change in the page, you must use:
window.history.replaceState(null, null, window.location.pathname);

I belive the best and simplest method for this is:
var newURL = location.href.split("?")[0];
window.history.pushState('object', document.title, newURL);

a simple way to do this, works on any page, requires HTML 5
// get the string following the ?
var query = window.location.search.substring(1)
// is there anything there ?
if(query.length) {
// are the new history methods available ?
if(window.history != undefined && window.history.pushState != undefined) {
// if pushstate exists, add a new state to the history, this changes the url without reloading the page
window.history.pushState({}, document.title, window.location.pathname);
}
}

I wanted to remove only one param success. Here's how you can do this:
let params = new URLSearchParams(location.search)
params.delete('success')
history.replaceState(null, '', '?' + params + location.hash)
This also retains #hash.
URLSearchParams won't work on IE, but being worked on for Edge. You can use a polyfill or a could use a naïve helper function for IE-support:
function take_param(key) {
var params = new Map(location.search.slice(1).split('&')
.map(function(p) { return p.split(/=(.*)/) }))
var value = params.get(key)
params.delete(key)
var search = Array.from(params.entries()).map(
function(v){ return v[0]+'='+v[1] }).join('&')
return {search: search ? '?' + search : '', value: value}
}
This can be used like:
history.replaceState(
null, '', take_param('success').search + location.hash)

Better solution :
window.history.pushState(null, null, window.location.pathname);

if I have a special tag at the end of my URL like: http://domain.com/?tag=12345
Here is the below code to remove that tag whenever it presents in the URL:
<script>
// Remove URL Tag Parameter from Address Bar
if (window.parent.location.href.match(/tag=/)){
if (typeof (history.pushState) != "undefined") {
var obj = { Title: document.title, Url: window.parent.location.pathname };
history.pushState(obj, obj.Title, obj.Url);
} else {
window.parent.location = window.parent.location.pathname;
}
}
</script>
This gives the idea to remove one or more (or all) parameters from URL
With window.location.pathname you basically get everything before '?' in the url.
var pathname = window.location.pathname; // Returns path only
var url = window.location.href; // Returns full URL

None of these solutions really worked for me, here is a IE11-compatible function that can also remove multiple parameters:
/**
* Removes URL parameters
* #param removeParams - param array
*/
function removeURLParameters(removeParams) {
const deleteRegex = new RegExp(removeParams.join('=|') + '=')
const params = location.search.slice(1).split('&')
let search = []
for (let i = 0; i < params.length; i++) if (deleteRegex.test(params[i]) === false) search.push(params[i])
window.history.replaceState({}, document.title, location.pathname + (search.length ? '?' + search.join('&') : '') + location.hash)
}
removeURLParameters(['param1', 'param2'])

var currURL = window.location.href;
var url = (currURL.split(window.location.host)[1]).split("?")[0];
window.history.pushState({}, document.title, url);
This will be a cleaner way to clear only query string.

//Joraid code is working but i altered as below. it will work if your URL contain "?" mark or not
//replace URL in browser
if(window.location.href.indexOf("?") > -1) {
var newUrl = refineUrl();
window.history.pushState("object or string", "Title", "/"+newUrl );
}
function refineUrl()
{
//get full url
var url = window.location.href;
//get url after/
var value = url = url.slice( 0, url.indexOf('?') );
//get the part after before ?
value = value.replace('#System.Web.Configuration.WebConfigurationManager.AppSettings["BaseURL"]','');
return value;
}

To clear out all the parameters, without doing a page refresh, AND if you are using HTML5, then you can do this:
history.pushState({}, '', 'index.html' ); //replace 'index.html' with whatever your page name is
This will add an entry in the browser history. You could also consider replaceState if you don't wan't to add a new entry and just want to replace the old entry.

a single line solution :
history.replaceState && history.replaceState(
null, '', location.pathname + location.search.replace(/[\?&]my_parameter=[^&]+/, '').replace(/^&/, '?')
);
credits : https://gist.github.com/simonw/9445b8c24ddfcbb856ec

Here is an ES6 one liner which preserves the location hash and does not pollute browser history by using replaceState:
(l=>{window.history.replaceState({},'',l.pathname+l.hash)})(location)

Running this js for me cleared any params on the current url without refreshing the page.
window.history.replaceState({}, document.title, location.protocol + '//' + location.host + location.pathname);

Here is how can specific query param be removed (even if repeated), without removing other query params:
const newUrl = new URL(location.href);
newUrl.searchParams.delete('deal');
window.history.replaceState({}, document.title, newUrl.href);

In Javascript:
window.location.href = window.location.href.split("?")[0]

Javascript URL Query String Logic

I have an events listing page which can be filtered by type and also by date using query string variables.
I am trying to achieve the following logic using javascript/jQuery.
I have a calendar which fires a function when updated. When fired I need to implement the following logic:
If the current URL contains ?filter= then add &dateStart= to the end of the URL.
If the current URL contains ?filter= AND &dateStart= then keep the current filter value but replace the date query string with a new one.
If the current URL contains ONLY ?dateStart= then replace it with the new one.
I have tried various methods to achieve this but I keep hitting the problem of appending information to the end of the URL rather than replacing parts of it.
Any help would be appreciated.
Thanks.

You can try something like this:
NOTE: not tested.
var newDateValue;
var myPath = window.location.pathname
//check if path contains the different variables
var containsFilter = myPath.indexOf("?filter=") != -1 ? true : false;
var containsAppendedDateStart = myPath.indexOf("&dateStart=" != -1 ? true : false;
var containsDateStart = myPath.indexOf("?dateStart=" != -1 ? true : false;
if(containsFilter && !containsAppendedDateStart){
// If the current URL contains ?filter= then add &dateStart= to the end of the URL.
window.location.replace(window.location.href + "&dateStart=");
}else if(containsFilter && containsAppendedDateStart){
//If the current URL contains ?filter= AND &dateStart= then keep the current filter value but replace the date query string with a new one.
newDateValue = 10; // add your new value here
var splittedPathArray = myPath.split("&dateStart=");
var newUrl = window.location.protocol + "//" + window.location.host + "/" + splittedPathArray[0] + "&dateStart=" + addNewValue;
window.location.replace(newUrl);
}else if(containsDateStart){
// If the current URL contains ONLY ?dateStart= then replace it with the new one.
newDateValue = 15;// add your new value here
var splittedPathArray = myPath.split("?dateStart=");
var newUrl = window.location.protocol + "//" + window.location.host + "/" + splittedPathArray[0] + "?dateStart=" + addNewValue;
}

You can achieve this more easy with native Web API or vanilla javascript than with jQuery. As far as jQuery don't provide any specific function to work with query strings.
The new URLSearchParams object provide a few methods to work more easily with URL query strings. In your case for example you'll need to do something like this:
function updateQueryString(queryString, dateStart) {
var queryString = new URLSearchParams(queryString);
queryString.has('dateStart')
? queryString.set('dateStart', dateStart)
: queryString.append('dateStart', dateStart);
return queryString.toString();
}
for this solution you'll need a polyfill
Sadly this is not yet implemented by the majority of web browsers and you'll need to "polyfill" the URLSearchParams object for this solution to work properly. You'll have to add this line to the <head> section in your html:
<script src="https://cdn.rawgit.com/inexorabletash/polyfill/v0.1.14/polyfill.min.js"></script>
You can find more information about the URLSearchParams in the Mozilla Developers Network Documentation, the WHATWG specification for the URL Standard or the specification by the W3C
solution without polyfill
​
If you don't like to use edge features you still can do it without any extra polyfill. It would look like this:
function updateQueryString(queryString, dateStart) {
var qsObject = {};
queryString
.substring(1) // ignore '?'
.split('&').forEach(function (param) {
param = param.split('=');
qsObject[param[0]] = param[1];
});
qsObject['dateStart'] = dateStart;
return '&' + Object.keys(qsObject)
.map(function (key) {
return key + '=' + qsObject[key];
})
.join('?');
}
Call whatever version of the updateQueryString function you rather like this:
updateQueryString(windonw.location.search, dateStart)

Remove URL parameters without refreshing page

I am trying to remove everything after the "?" in the browser url on document ready.
Here is what I am trying:
jQuery(document).ready(function($) {
var url = window.location.href;
url = url.split('?')[0];
});
I can do this and see it the below works:
jQuery(document).ready(function($) {
var url = window.location.href;
alert(url.split('?')[0]);
});

TL;DR
1- To modify current URL and add / inject it (the new modified URL) as a new URL entry to history list, use pushState:
window.history.pushState({}, document.title, "/" + "my-new-url.html");
2- To replace current URL without adding it to history entries, use replaceState:
window.history.replaceState({}, document.title, "/" + "my-new-url.html");
3- Depending on your business logic, pushState will be useful in cases such as:
you want to support the browser's back button
you want to create a new URL, add/insert/push the new URL to history entries, and make it current URL
allowing users to bookmark the page with the same parameters (to show the same contents)
to programmatically access the data through the stateObj then parse from the anchor
As I understood from your comment, you want to clean your URL without redirecting again.
Note that you cannot change the whole URL. You can just change what comes after the domain's name. This means that you cannot change www.example.com/ but you can change what comes after .com/
www.example.com/old-page-name => can become => www.example.com/myNewPaage20180322.php
Background
We can use:
1- The pushState() method if you want to add a new modified URL to history entries.
2- The replaceState() method if you want to update/replace current history entry.
.replaceState() operates exactly like .pushState() except that .replaceState() modifies the current history entry instead of creating a new one. Note that this doesn't prevent the creation of a new entry in the global browser history.
.replaceState() is particularly useful when you want to update the
state object or URL of the current history entry in response to some
user action.
Code
To do that I will use The pushState() method for this example which works similarly to the following format:
var myNewURL = "my-new-URL.php";//the new URL
window.history.pushState("object or string", "Title", "/" + myNewURL );
Feel free to replace pushState with replaceState based on your requirements.
You can substitute the paramter "object or string" with {} and "Title" with document.title so the final statment will become:
window.history.pushState({}, document.title, "/" + myNewURL );
Results
The previous two lines of code will make a URL such as:
https://domain.tld/some/randome/url/which/will/be/deleted/
To become:
https://domain.tld/my-new-url.php
Action
Now let's try a different approach. Say you need to keep the file's name. The file name comes after the last / and before the query string ?.
http://www.someDomain.com/really/long/address/keepThisLastOne.php?name=john
Will be:
http://www.someDomain.com/keepThisLastOne.php
Something like this will get it working:
//fetch new URL
//refineURL() gives you the freedom to alter the URL string based on your needs.
var myNewURL = refineURL();
//here you pass the new URL extension you want to appear after the domains '/'. Note that the previous identifiers or "query string" will be replaced.
window.history.pushState("object or string", "Title", "/" + myNewURL );
//Helper function to extract the URL between the last '/' and before '?'
//If URL is www.example.com/one/two/file.php?user=55 this function will return 'file.php'
//pseudo code: edit to match your URL settings
function refineURL()
{
//get full URL
var currURL= window.location.href; //get current address
//Get the URL between what's after '/' and befor '?'
//1- get URL after'/'
var afterDomain= currURL.substring(currURL.lastIndexOf('/') + 1);
//2- get the part before '?'
var beforeQueryString= afterDomain.split("?")[0];
return beforeQueryString;
}
UPDATE:
For one liner fans, try this out in your console/firebug and this page URL will change:
window.history.pushState("object or string", "Title", "/"+window.location.href.substring(window.location.href.lastIndexOf('/') + 1).split("?")[0]);
This page URL will change from:
http://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page/22753103#22753103
To
http://stackoverflow.com/22753103#22753103
Note: as Samuel Liew indicated in the comments below, this feature has been introduced only for HTML5.
An alternative approach would be to actually redirect your page (but you will lose the query string `?', is it still needed or the data has been processed?).
window.location.href = window.location.href.split("?")[0]; //"http://www.newurl.com";
Note 2:
Firefox seems to ignore window.history.pushState({}, document.title, ''); when the last argument is an empty string. Adding a slash ('/') worked as expected and removed the whole query part of the url string.
Chrome seems to be fine with an empty string.

These are all misleading, you never want to add to the browser history unless you want to go to a different page in a single page app. If you want to remove the parameters without a change in the page, you must use:
window.history.replaceState(null, null, window.location.pathname);

I belive the best and simplest method for this is:
var newURL = location.href.split("?")[0];
window.history.pushState('object', document.title, newURL);

a simple way to do this, works on any page, requires HTML 5
// get the string following the ?
var query = window.location.search.substring(1)
// is there anything there ?
if(query.length) {
// are the new history methods available ?
if(window.history != undefined && window.history.pushState != undefined) {
// if pushstate exists, add a new state to the history, this changes the url without reloading the page
window.history.pushState({}, document.title, window.location.pathname);
}
}

I wanted to remove only one param success. Here's how you can do this:
let params = new URLSearchParams(location.search)
params.delete('success')
history.replaceState(null, '', '?' + params + location.hash)
This also retains #hash.
URLSearchParams won't work on IE, but being worked on for Edge. You can use a polyfill or a could use a naïve helper function for IE-support:
function take_param(key) {
var params = new Map(location.search.slice(1).split('&')
.map(function(p) { return p.split(/=(.*)/) }))
var value = params.get(key)
params.delete(key)
var search = Array.from(params.entries()).map(
function(v){ return v[0]+'='+v[1] }).join('&')
return {search: search ? '?' + search : '', value: value}
}
This can be used like:
history.replaceState(
null, '', take_param('success').search + location.hash)

Better solution :
window.history.pushState(null, null, window.location.pathname);

if I have a special tag at the end of my URL like: http://domain.com/?tag=12345
Here is the below code to remove that tag whenever it presents in the URL:
<script>
// Remove URL Tag Parameter from Address Bar
if (window.parent.location.href.match(/tag=/)){
if (typeof (history.pushState) != "undefined") {
var obj = { Title: document.title, Url: window.parent.location.pathname };
history.pushState(obj, obj.Title, obj.Url);
} else {
window.parent.location = window.parent.location.pathname;
}
}
</script>
This gives the idea to remove one or more (or all) parameters from URL
With window.location.pathname you basically get everything before '?' in the url.
var pathname = window.location.pathname; // Returns path only
var url = window.location.href; // Returns full URL

None of these solutions really worked for me, here is a IE11-compatible function that can also remove multiple parameters:
/**
* Removes URL parameters
* #param removeParams - param array
*/
function removeURLParameters(removeParams) {
const deleteRegex = new RegExp(removeParams.join('=|') + '=')
const params = location.search.slice(1).split('&')
let search = []
for (let i = 0; i < params.length; i++) if (deleteRegex.test(params[i]) === false) search.push(params[i])
window.history.replaceState({}, document.title, location.pathname + (search.length ? '?' + search.join('&') : '') + location.hash)
}
removeURLParameters(['param1', 'param2'])

var currURL = window.location.href;
var url = (currURL.split(window.location.host)[1]).split("?")[0];
window.history.pushState({}, document.title, url);
This will be a cleaner way to clear only query string.

//Joraid code is working but i altered as below. it will work if your URL contain "?" mark or not
//replace URL in browser
if(window.location.href.indexOf("?") > -1) {
var newUrl = refineUrl();
window.history.pushState("object or string", "Title", "/"+newUrl );
}
function refineUrl()
{
//get full url
var url = window.location.href;
//get url after/
var value = url = url.slice( 0, url.indexOf('?') );
//get the part after before ?
value = value.replace('#System.Web.Configuration.WebConfigurationManager.AppSettings["BaseURL"]','');
return value;
}

To clear out all the parameters, without doing a page refresh, AND if you are using HTML5, then you can do this:
history.pushState({}, '', 'index.html' ); //replace 'index.html' with whatever your page name is
This will add an entry in the browser history. You could also consider replaceState if you don't wan't to add a new entry and just want to replace the old entry.

a single line solution :
history.replaceState && history.replaceState(
null, '', location.pathname + location.search.replace(/[\?&]my_parameter=[^&]+/, '').replace(/^&/, '?')
);
credits : https://gist.github.com/simonw/9445b8c24ddfcbb856ec

Here is an ES6 one liner which preserves the location hash and does not pollute browser history by using replaceState:
(l=>{window.history.replaceState({},'',l.pathname+l.hash)})(location)

Running this js for me cleared any params on the current url without refreshing the page.
window.history.replaceState({}, document.title, location.protocol + '//' + location.host + location.pathname);

Here is how can specific query param be removed (even if repeated), without removing other query params:
const newUrl = new URL(location.href);
newUrl.searchParams.delete('deal');
window.history.replaceState({}, document.title, newUrl.href);

In Javascript:
window.location.href = window.location.href.split("?")[0]

jQuery get last part of URL

I have a series of pages where I need to get a specific code for a button.
I want to put the code which is in the url into a variable with jQuery.
An example URL is www.example.com/folder/code/12345/
I want to get the number part in a variable called (siteCode)
Thanks in advance for any answers.
jquery / Pseudo code:
var siteCode;
// start function
function imageCode(){
siteCode // equals number part of URL
$('.button').attr('src', 'http:www.example.com/images/'+siteCode+'.jpg');
}

You can use the following code to get the last part of the url.:
var value = url.substring(url.lastIndexOf('/') + 1);

I'd suggest:
var URI = 'www.example.com/folder/code/12345/',
parts = URI.split('/'),
lastPart = parts.pop() == '' ? parts[parts.length - 1] : parts.pop();
JS Fiddle demo.

var str="url";
str.split("/")[3]
you can use split

There is one best way to take last part of URL is like following which generally has been used in real implementation.
There are Some loopholes in previously given answer was:
1.Consider what if there is a url like www.example.com/folder/code/12345 (Without '/' forward slash) Than none of the above code will work as per expectation.
2.Consider if folder hierarchy increases like www.example.com/folder/sub-folder/sub-sub-folder/code/12345
$(function () {
siteCode = getLastPartOfUrl('www.example.com/folder/code/12345/');
});
var getLastPartOfUrl =function($url) {
var url = $url;
var urlsplit = url.split("/");
var lastpart = urlsplit[urlsplit.length-1];
if(lastpart==='')
{
lastpart = urlsplit[urlsplit.length-2];
}
return lastpart;
}

Also try using regex
var url = "www.example.com/folder/code/12345";
var checkExt = /\d$/i.test(url);
if (checkExt) {
alert("Yup its a numeric");
} else {
alert("Nope");
}

Append to URL and refresh page

I am looking to write a piece of javascript that will append a parameter to the current URL and then refresh the page - how can I do this?

this should work (not tested!)
var url = window.location.href;
if (url.indexOf('?') > -1){
url += '&param=1'
}else{
url += '?param=1'
}
window.location.href = url;

Shorter than the accepted answer, doing the same, but keeping it simple:
window.location.search += '&param=42';
We don't have to alter the entire url, just the query string, known as the search attribute of location.
When you are assigning a value to the search attribute, the question mark is automatically inserted by the browser and the page is reloaded.

Most of the answers here suggest that one should append the parameter(s) to the URL, something like the following snippet or a similar variation:
location.href = location.href + "&parameter=" + value;
This will work quite well for the majority of the cases.
However
That's not the correct way to append a parameter to a URL in my opinion.
Because the suggested approach does not test if the parameter is already set in the URL, if not careful one may end up with a very long URL with the same parameter repeated multiple times. ie:
https://stackoverflow.com/?&param=1&param=1&param=1&param=1&param=1&param=1&param=1&param=1&param=1
at this point is where problems begin. The suggested approach could and will create a very long URL after multiple page refreshes, thus making the URL invalid. Follow this link for more information about long URL What is the maximum length of a URL in different browsers?
This is my suggested approach:
function URL_add_parameter(url, param, value){
var hash = {};
var parser = document.createElement('a');
parser.href = url;
var parameters = parser.search.split(/\?|&/);
for(var i=0; i < parameters.length; i++) {
if(!parameters[i])
continue;
var ary = parameters[i].split('=');
hash[ary[0]] = ary[1];
}
hash[param] = value;
var list = [];
Object.keys(hash).forEach(function (key) {
list.push(key + '=' + hash[key]);
});
parser.search = '?' + list.join('&');
return parser.href;
}
With this function one just will have to do the following:
location.href = URL_add_parameter(location.href, 'param', 'value');

If you are developing for a modern browser, Instead of parsing the url parameters yourself- you can use the built in URL functions to do it for you like this:
const parser = new URL(url || window.location);
parser.searchParams.set(key, value);
window.location = parser.href;

location.href = location.href + "&parameter=" + value;

This line of JS code takes the link without params (ie before '?') and then append params to it.
window.location.href = (window.location.href.split('?')[0]) + "?p1=ABC&p2=XYZ";
The above line of code is appending two params p1 and p2 with respective values 'ABC' and 'XYZ' (for better understanding).

function gotoItem( item ){
var url = window.location.href;
var separator = (url.indexOf('?') > -1) ? "&" : "?";
var qs = "item=" + encodeURIComponent(item);
window.location.href = url + separator + qs;
}
More compat version
function gotoItem( item ){
var url = window.location.href;
url += (url.indexOf('?') > -1)?"&":"?" + "item=" + encodeURIComponent(item);
window.location.href = url;
}

Please check the below code :
/*Get current URL*/
var _url = location.href;
/*Check if the url already contains ?, if yes append the parameter, else add the parameter*/
_url = ( _url.indexOf('?') !== -1 ) ? _url+'&param='+value : _url+'?param='+value;
/*reload the page */
window.location.href = _url;

One small bug fix for #yeyo's thoughtful answer above.
Change:
var parameters = parser.search.split(/\?|&/);
To:
var parameters = parser.search.split(/\?|&/);

Try this
var url = ApiUrl(`/customers`);
if(data){
url += '?search='+data;
}
else
{
url += `?page=${page}&per_page=${perpage}`;
}
console.log(url);

Also:
window.location.href += (window.location.href.indexOf('?') > -1 ? '&' : '?') + 'param=1'
Just one liner of Shlomi answer usable in bookmarklets