I\'ve been looking for an efficient way to do this but haven\'t been able to find it, basically what I need is that given this url for example:
http://localh
How about something like this:
<script>
function changeQueryVariable(keyString, replaceString) {
var query = window.location.search.substring(1);
var vars = query.split("&");
var replaced = false;
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == keyString) {
vars[i] = pair[0] + "="+ replaceString;
replaced = true;
}
}
if (!replaced) vars.push(keyString + "=" + replaceString);
return vars.join("&");
}
</script>
If you look closely you'll see two surprising things about URLs: (1) they seem simple, but the details and corner cases are actually hard, (2) Amazingly JavaScript doesn't provide a full API for making working with them any easier. I think a full-fledged library is in order to avoid people re-inventing the wheel themselves or copying some random dude's clever, but likely buggy regex code snippet. Maybe try URI.js (http://medialize.github.io/URI.js/)
I use this method which:
return the value of the removed parameter
function getUrlParameterAndRemoveParameter(paramName) {
var url = window.location.origin + window.location.pathname;
var s = window.location.search.substring(1);
var pArray = (s == "" ? [] : s.split('&'));
var paramValue = null;
var pArrayNew = [];
for (var i = 0; i < pArray.length; i++) {
var pName = pArray[i].split('=');
if (pName[0] === paramName) {
paramValue = pName[1] === undefined ? true : decodeURIComponent(pName[1]);
}
else {
pArrayNew.push(pArray[i]);
}
}
url += (pArrayNew.length == 0 ? "" : "?" + pArrayNew.join('&'));
window.history.replaceState(window.history.state, document.title, url);
return paramValue;
}
A solution without Regex, a little bit easier on the eye, one I was looking for
This supports ports, hash parameters etc.
Uses browsers attribute element as a parser.
function setUrlParameters(url, parameters) {
var parser = document.createElement('a');
parser.href = url;
url = "";
if (parser.protocol) {
url += parser.protocol + "//";
}
if (parser.host) {
url += parser.host;
}
if (parser.pathname) {
url += parser.pathname;
}
var queryParts = {};
if (parser.search) {
var search = parser.search.substring(1);
var searchParts = search.split("&");
for (var i = 0; i < searchParts.length; i++) {
var searchPart = searchParts[i];
var whitespaceIndex = searchPart.indexOf("=");
if (whitespaceIndex !== -1) {
var key = searchPart.substring(0, whitespaceIndex);
var value = searchPart.substring(whitespaceIndex + 1);
queryParts[key] = value;
} else {
queryParts[searchPart] = false;
}
}
}
var parameterKeys = Object.keys(parameters);
for (var i = 0; i < parameterKeys.length; i++) {
var parameterKey = parameterKeys[i];
queryParts[parameterKey] = parameters[parameterKey];
}
var queryPartKeys = Object.keys(queryParts);
var query = "";
for (var i = 0; i < queryPartKeys.length; i++) {
if (query.length === 0) {
query += "?";
}
if (query.length > 1) {
query += "&";
}
var queryPartKey = queryPartKeys[i];
query += queryPartKey;
if (queryParts[queryPartKey]) {
query += "=";
query += queryParts[queryPartKey];
}
}
url += query;
if (parser.hash) {
url += parser.hash;
}
return url;
}
UpdatE: Make it into a nice function for you: http://jsfiddle.net/wesbos/KH25r/1/
function swapOutSource(url, newSource) {
params = url.split('&');
var src = params[0].split('=');
params.shift();
src[1] = newSource;
var newUrl = ( src.join('=') + params.join('&'));
return newUrl;
}
Then go at it!
var newUrl = swapOutSource("http://localhost/mysite/includes/phpThumb.php?src=http://media2.jupix.co.uk/v3/clients/4/properties/795/IMG_795_1_large.jpg&w=592&aoe=1&q=100","http://link/to/new.jpg");
console.log(newUrl);
Editing a Parameter The set method of the URLSearchParams object sets the new value of the parameter.
After setting the new value you can get the new query string with the toString() method. This query string can be set as the new value of the search property of the URL object.
The final new url can then be retrieved with the toString() method of the URL object.
var query_string = url.search;
var search_params = new URLSearchParams(query_string);
// new value of "id" is set to "101"
search_params.set('id', '101');
// change the search property of the main url
url.search = search_params.toString();
// the new url string
var new_url = url.toString();
// output : http://demourl.com/path?id=101&topic=main
console.log(new_url);
Source - https://usefulangle.com/post/81/javascript-change-url-parameters