Javascript add update query parameter to url

Asked
Active3 hr before
Viewed126 times

7 Answers

parameterjavascriptquery
90%

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

Example_snippet/controller/utility/_parameter.js/ var url = new URL("http://foo.. . .
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);
load more v
88%

Example_snippet/controller/utility/_parameter.js/ function updateQueryStringPara. . .
function updateQueryStringParameter(uri, key, value) {
   var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
   var separator = uri.indexOf('?') !== -1 ? "&" : "?";
   if (uri.match(re)) {
      return uri.replace(re, '$1' + key + "=" + value + '$2');
   } else {
      return uri + separator + key + "=" + value;
   }
}
//You can reload the url like so
var newUrl = updateQueryStringParameter(window.location.href, "some_param", "replaceValue");
window.history.pushState("", "Page Title Here", newUrl);
load more v
72%

The value of a parameter can be updated with the set() method of URLSearchParams object,,After setting the new value you can get the new query string with the toString() method

Example_snippet/controller/utility/_parameter.js/ var url = new URL('http://demo. . .
var url = new URL('http://demourl.com/path?id=100&topic=main');
var search_params = url.searchParams;

// 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);
Step 2 continued with var url = new URL('http://demo. . .
var url = new URL('http://demourl.com/path?id=100');
var search_params = url.searchParams;

// add "topic" parameter
search_params.set('topic', 'main');

url.search = search_params.toString();

var new_url = url.toString();

// output : http://demourl.com/path?id=100&topic=main
console.log(new_url);
Step 3 continued with var url = new URL('http://demo. . .
var url = new URL('http://demourl.com/path?topic=main');
var search_params = url.searchParams;

search_params.append('id', '101');
search_params.append('id', '102');

url.search = search_params.toString();

var new_url = url.toString();

// output : http://demourl.com/path?id=100&id=101&id=102&topic=main
console.log(new_url);
Step 4 continued with search_params.delete('id');. . .
search_params.delete('id');
Step 5 continued with var url = new URL('http://demo. . .
var url = new URL('http://demourl.com/path?topic=main');

// set search property to blank
url.search = '';

var new_url = url.toString();

// output : http://demourl.com/path
console.log(new_url);
load more v
65%

The append() method of the URLSearchParams interface appends a specified key/value pair as a new search parameter,,URLSearchParams

Example_snippet/controller/utility/_parameter.js/ URLSearchParams.append(name, v. . .
URLSearchParams.append(name, value)
load more v
75%

URL query parameters can be easily modified using URLSearchParams and History interfaces:,Alternatively instead of modifying current history entry using replaceState() we can use pushState() method to create a new one:

Example_snippet/controller/utility/_javascript.js/ // Construct URLSearchParams o. . .
// Construct URLSearchParams object instance from current URL querystring.
var queryParams = new URLSearchParams(window.location.search);

// Set new or modify existing parameter value. 
queryParams.set("myParam", "myValue");

// Replace current querystring with the new one.
history.replaceState(null, null, "?" + queryParams.toString());
load more v
40%

How to add a parameter to the URL in JavaScript ?,How to Create Query Parameters in JavaScript ?,How to serialize an object into a list of URL query parameters using JavaScript ?,Given a URL and the task is to add an additional parameter (name & value) to the URL using JavaScript,

Example_snippet/controller/utility/_javascript.js/ var URLSearchParams = URL.sear. . .
var URLSearchParams = URL.searchParams;
22%

3, Next, I’m updating the parameters object and setting the new URL

Example_snippet/controller/utility/_javascript.js/ // Get current page from URL p. . .
// Get current page from URL parameters and return to current pagefrom history.back()
let queryParams = new URLSearchParams(window.location.search),
   page = 1; // Default is one

if (parseInt(queryParams.get('pg'), 10) > 0) {
   page = queryParams.get('pg');
}
load more v