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]
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)
I'm trying to add a "share" feature to (my own) Google Chrome Extension but I've stumbled across issues with variables and URLs (I'm useless when it comes to JavaScript).
My code is below, if anyone could guide me in where to go I would be heavily grateful.
<script>
chrome.tabs.getSelected(null, function(tab) {
document.getElementById('longLink').value = tab.url;
});
var shareURL = document.getElementById('longLink')
</script>
Tweet This
I've also tried
Tweet This
Finally, I tried this method
<script>
function tweet() {
var twitter='http://twitter.com/?status='+encodeURIComponent(tab.url);
chrome.tabs.create({url: twitter});
}
</script>
<a onClick="tweet()" href="" target="_blank">Tweet</a>
// Takes a url, a GET parameter name and value and returns
// the given URL but with the given parameter at the end of
// the query portion.
function urlWithParameter(url, name, value) {
// Find the fragment since the query ends where the fragment starts.
var fragmentStart = url.indexOf('#');
if (fragmentStart < 0) { fragmentStart = url.length; }
var urlBeforeFragment = url.substring(0, fragmentStart);
// If there is no query (no '?' in URL) then start the parameter with
// a '?' to create a query. Otherwise separate the parameter from
// the existing query with a '&'.
// We use encodeURIComponent which assumes UTF-8 to escapes special URL
// characters like '#', '&', '?', '%', and '='.
// It assumes UTF-8. Any replacement that does not assume UTF-8 must escape
// at least the code-points listed above.
return urlBeforeFragment + (urlBeforeFragment.indexOf('?') < 0 ? '?' : '&')
+ encodeURIComponent(name) + '=' + encodeURIComponent(value)
+ url.substring(fragmentStart);
}
can be used thus
<script>/* the function above */</script>
<a onclick="this.href = urlWithParameter('http://twitter.com/', 'status', tab.url)" href="#">...</a>
to do what you want while still respecting the link target implied by <base target="..."> and still displaying a useful URL on hover.
Alternatively, if you only have one parameter you need to manipulate, then you can use your earlier solution thus
<a onclick="this.href = 'http://twitter.com/?status=' + encodeURIComponent(tab.url)" href="http://twitter.com/">...</a>
EDIT: To get it working with the async chrome accessors, try the following:
<script>
function redirectWithSelectedTabUrl(link) {
chrome.tabs.getSelected(null, function (tab) {
window.location.href = tab.url
? link.href + "?status=" + encodeURIComponent(tab.url)
: link.href;
};
return false;
}
</script>
...
This is simple and works across a wide range of browsers, but it will ignore the target and may not send along referrer headers.
I am trying to use the youtube data api to generate a video playlist.
However, the video urls require a format of:
youtube.com/watch?v=3sZOD3xKL0Y
but what the api generates is:
youtube.com/watch?v=3sZOD3xKL0Y&feature=youtube_gdata
So what I need to do is be able to select everything after and including the ampersand(&) and remove it from the url.
Any way to do this with javascript and some sort of regular expression?
What am I missing?
Why not:
url.split('?')[0]
Hmm... Looking for better way... here it is
var onlyUrl = window.location.href.replace(window.location.search,'');
Example: http://jsfiddle.net/SjrqF/
var url = 'youtube.com/watch?v=3sZOD3xKL0Y&feature=youtube_gdata';
url = url.slice( 0, url.indexOf('&') );
or:
Example: http://jsfiddle.net/SjrqF/1/
var url = 'youtube.com/watch?v=3sZOD3xKL0Y&feature=youtube_gdata';
url = url.split( '&' )[0];
Use this function:
var getCleanUrl = function(url) {
return url.replace(/#.*$/, '').replace(/\?.*$/, '');
};
// get rid of hash and params
console.log(getCleanUrl('https://sidanmor.com/?firstname=idan&lastname=mor'));
If you want all the href parts, use this:
var url = document.createElement('a');
url.href = 'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container';
console.log(url.href); // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol); // https:
console.log(url.host); // developer.mozilla.org
console.log(url.hostname); // developer.mozilla.org
console.log(url.port); // (blank - https assumes port 443)
console.log(url.pathname); // /en-US/search
console.log(url.search); // ?q=URL
console.log(url.hash); // #search-results-close-container
console.log(url.origin); // https://developer.mozilla.org
//user113716 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;
}
This worked for me:
window.location.replace(window.location.pathname)
No splits.. :) The correct/foolproof way is to let the native browser BUILT-IN functions do the heavy lifting using urlParams, the heavy lifting is done for you.
//summary answer - this one line will correctly replace in all current browsers
window.history.replaceState({}, '', `${location.pathname}?${params}`);
// 1 Get your URL
let url = new URL('https://tykt.org?unicorn=1&printer=2&scanner=3');
console.log("URL: "+ url.toString());
// 2 get your params
let params = new URLSearchParams(url.search);
console.log("querys: " + params.toString());
// 3 Delete the printer param, Query string is now gone
params.delete('printer');
console.log("Printer Removed: " + params.toString());
// BELOW = Add it back to the URL, DONE!
___________
NOW Putting it all together in your live browser
// Above is a breakdown of how to get your params
// 4 then you simply replace those in your current browser!!
window.history.replaceState({}, '', `${location.pathname}?${params}`);
Sample working Javascript Fiddle here
You could use a RegEx to match the value of v and build the URL yourself since you know the URL is youtube.com/watch?v=...
http://jsfiddle.net/akURz/
var url = 'http://youtube.com/watch?v=3sZOD3xKL0Y';
alert(url.match(/v\=([a-z0-9]+)/i));
Well, I am using this:
stripUrl(urlToStrip){
let stripped = urlToStrip.split('?')[0];
stripped = stripped.split('&')[0];
stripped = stripped.split('#')[0];
return stripped;
}
or:
stripUrl(urlToStrip){
return urlToStrip.split('?')[0].split('&')[0].split('#')[0];
}
For example we have:
example.com/list/search?q=Somethink
And you need use variable url like this by window.location.href:
example.com/list/edit
From url:
example.com/list/search?q=Somethink
example.com/list/
var url = (window.location.href);
url = url.split('/search')[0];
url = (url + '/edit');
This is simple solution:-)
I'm trying to reload a page with an appended variable in the URL, deviceID. It shows up in "realtime" div just fine. What am I doing wrong?:
document.getElementById("realtime").innerHTML = "<pre>"+JSON.stringify(msg)+"</pre>";
var obj = jQuery.parseJSON(JSON.stringify(msg));
var deviceId = obj.deviceId;
var pathname = window.location.pathname;
var pathAppend = pathname + "?deviceId=" + deviceId;
window.location.reload(pathAppend);
It's because you're using window.location.reload incorrectly. reload accepts a boolean which:
when it is true, causes the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache. - MDC
You should do something like:
var query = window.location.search, deviceParam = "deviceId=" + deviceId;
//if there is a query string, append it, otherwise construct the query string.
query += (query === "" ? "?" : "&") + deviceParam;
window.location.search = query; // page should reload