Thursday, February 1, 2018

Javacript: Set or Update a URL/QueryString Parameter, and update URL

Method1 :-

// Explicitly save/update a url parameter using HTML5's replaceState().
function updateQueryStringParam(param, value) {
  baseUrl = [location.protocol, '//', location.host, location.pathname].join('');
  urlQueryString = document.location.search;
  var newParam = key + '=' + value,
  params = '?' + newParam;

  // If the "search" string exists, then build params from it
  if (urlQueryString) {
    keyRegex = new RegExp('([\?&])' + key + '[^&]*');
    // If param exists already, update it
    if (urlQueryString.match(keyRegex) !== null) {
      params = urlQueryString.replace(keyRegex, "$1" + newParam);
    } else { // Otherwise, add it to end of query string
      params = urlQueryString + '&' + newParam;
    }
  }
  window.history.replaceState({}, "", baseUrl + params);
}


Method2:-

var Inputurl ="http://www.example.com/MP/Test.aspx?ID=2&Name=Kumar&Dept=N&Loc=Chennai"

// Function Implemented
 var OutputUrl=replaceKeyValue(Inputurl , "Name", "Karthik");

// Output Url
Result Url as below

http://www.example.com/MP/Test.aspx?ID=2&Name=Karthik&Dept=N&Loc=Chennai
 
// Javascript Function

function replaceKeyValue(url, keyName, newValue) {
            var urlParts = url.split("?");
            if (urlParts.length == 2) {
                var queryString = urlParts[1];
                queryString = queryString.split("&");
                var newQueryString = [];
                if (queryString.length > 0) {
                    $.each(queryString, function (i, e) {
                        var keyValue = e.split("=");
                        if (keyValue.length == 2 && $.trim(keyValue[0]) == keyName) {
                            keyValue[1] = newValue
                        }
                        newQueryString.push(keyValue.join("="));
                    })
                }
                return urlParts[0] + "?" + newQueryString.join("&");
            }
            return url;
        }

No comments:

Change default Port on Next.js app

 If any other app or process is running on port 3000 , you will get this error in your terminal Port 3000 is already in use. error Command f...