web-dev-qa-db-fra.com

Comment ajouter ou remplacer un paramètre de requête dans une URL à l'aide de Javascript/jQuery?

J'utilise jQuery 1.12. Je souhaite remplacer un paramètre de chaîne de requête dans la chaîne de requête d'URL de ma fenêtre ou ajouter le paramètre s'il n'existait pas auparavant. J'ai essayé le ci-dessous:

new_url = window.location.href.replace( /[\?#].*|$/, "?order_by=" + data_val )  
window.location.href = new_url

mais ce que je découvre, c’est que cela efface tous les paramètres précédents de la chaîne de requête, ce que je ne veux pas. Si la chaîne de requête est:

?a=1&b=2

Je voudrais que la nouvelle chaîne de requête soit:

?a=2&b=2&order_by=data

et si la chaîne de requête était:

?a=2&b=3&order_by=old_data

il deviendrait:

?a=2&b=3&order_by=data
javascriptjqueryregexurlparameters
7
user7055375

Vous pouvez utiliser un plugin jQuery pour faire le gros du travail pour vous. Il analysera la chaîne de requête et reconstruira la chaîne de requête mise à jour pour vous. Beaucoup moins de code à traiter.

Page de téléchargement du plugin
Github Repo 

// URL: ?a=2&b=3&order_by=old_data

var order_by = $.query.get('order_by');
//=> old_data

// Conditionally modify parameter value
if (order_by) { 
  order_by = “data”;
}

// Inject modified parameter back into query string
var newUrl = $.query.set(“order_by”, order_by).toString();
//=> ?a=2&b=3&order_by=data

Pour ceux qui utilisent Node.js, un package pour cela est disponible dans NPM. 

Package NPM
Github Repo 

var queryString = require('query-string');
var parsed = queryString.parse('?a=2&b=3&order_by=old_data');  // location.search

// Conditionally modify parameter value
if (parsed.order_by) {
  parsed.order_by = 'data';
}

// Inject modified parameter back into query string
const newQueryString = queryString.stringify(parsed);
//=> a=2&b=3&order_by=data
3
grizzthedj

Une bonne solution doit gérer tout ce qui suit:

  1. Une URL qui a déjà un paramètre de requête order_by, éventuellement avec des espaces avant le signe égal. Cela peut être divisé en cas où order_by apparaît au début, au milieu ou à la fin de la chaîne de requête.
  2. Une URL qui ne possède pas encore de paramètre de requête order_by mais qui possède déjà un point d'interrogation pour délimiter la chaîne de requête.
  3. Une URL qui ne possède pas encore de paramètre de requête order_by et qui n'a pas déjà de point d'interrogation pour délimiter la chaîne de requête.

Ce qui suit va gérer les cas ci-dessus:

  if (/[?&]order_by\s*=/.test(oldUrl)) {
    newUrl = oldUrl.replace(/(?:([?&])order_by\s*=[^?&]*)/, "$1order_by=" + data_val);
  } else if (/\?/.test(oldUrl)) {
    newUrl = oldUrl + "&order_by=" + data_val;
  } else {
    newUrl = oldUrl + "?order_by=" + data_val;
  }

comme démontré ci-dessous:

getNewUrl("?a=1&b=2");
getNewUrl("?a=2&b=3&order_by=old_data");
getNewUrl("?a=2&b=3&order_by = old_data&c=4");
getNewUrl("?order_by=old_data&a=2&b=3");
getNewUrl("http://www.stackoverflow.com");

function getNewUrl(oldUrl) {
  var data_val = "new_data";
  var newUrl;
  if (/[?&]order_by\s*=/.test(oldUrl)) {
    newUrl = oldUrl.replace(/(?:([?&])order_by\s*=[^?&]*)/, "$1order_by=" + data_val);
  } else if (/\?/.test(oldUrl)) {
    newUrl = oldUrl + "&order_by=" + data_val;
  } else {
    newUrl = oldUrl + "?order_by=" + data_val;
  }
  console.log(oldUrl + "\n...becomes...\n" + newUrl);
}

4
Steve Chambers

function addOrReplaceOrderBy(newData) {
  var stringToAdd = "order_by=" + newData;

  if (window.location.search == "")
    return window.location.href + stringToAdd;

  if (window.location.search.indexOf('order_by=') == -1)
    return window.location.href + stringToAdd;

  var newSearchString = "";
  var searchParams = window.location.search.substring(1).split("&");
  for (var i = 0; i < searchParams.length; i++) {
    if (searchParams[i].indexOf('order_by=') > -1) {
      searchParams[i] = "order_by=" + newData;
      break;
    }
  }
  return window.location.href.split("?")[0] + "?" + searchParams.join("&");
}

window.location.href = addOrReplaceOrderBy("new_order_by");

Un peu long mais je pense que cela fonctionne comme prévu.

3
AVAVT

Peut-être pourriez-vous essayer de modifier l'expression régulière pour ne récupérer que les valeurs que vous recherchez, puis les ajouter ou les mettre à jour dans une fonction d'assistance, comme ceci:

function paramUpdate(param) {

  var url = window.location.href,
      regExp = new RegExp(param.key + '=([a-z0-9\-\_]+)(?:&)?'),
      existsMatch = url.match(regExp);

  if (!existsMatch) {
      return url + '&' + param.key + '=' + param.value
  }

  var paramToUpdate = existsMatch[0],
      valueToReplace = existsMatch[1],
      updatedParam = paramToUpdate.replace(valueToReplace, param.value);

  return url.replace(paramToUpdate, updatedParam);
}

var new_url = paramUpdate({
    key: 'order_by',
    value: 'id'
});
window.location.href = new_url;

J'espère que cela fonctionne bien pour vos besoins!

1
gtrenco

Vous pouvez supprimer un paramètre d'une chaîne de requête à l'aide de URLSearchParams https://developer.mozilla.org/ru/docs/Web/API/URLSearchParams?param11=val

Il n'est pas encore pris en charge par IE et Safari, mais vous pouvez l'utiliser en ajoutant polyfill https://github.com/jerrybendy/url-search-params-polyfill

Et pour accéder à ou modifier la partie requête de l'URI, vous devez utiliser la propriété "search" de window.location.

Exemple de code de travail:

  var a = document.createElement("a")
  a.href = "http://localhost.com?param1=val&param2=val2&param3=val3#myHashCode";
  var queryParams = new URLSearchParams(a.search)
  queryParams.delete("param2")
  a.search = queryParams.toString();
  console.log(a.href);

1
Artem Bozhko

Cette petite fonction pourrait aider. 

function changeSearchQueryParameter(oldParameter,newParameter,newValue) {
var parameters = location.search.replace("?", "").split("&").filter(function(el){ return el !== "" });
var out = "";
var count = 0;
if(oldParameter.length>0) {
if(newParameter.length>0 && (newValue.length>0 || newValue>=0)){
	out += "?";
	var params = [];
	parameters.forEach(function(v){
		var vA = v.split("=");
		if(vA[0]==oldParameter) {
			vA[0]=newParameter;
			if((newValue.length>0 || newValue>=0)) {
			vA[1] = newValue;			
			}
		} else {
			count++;
		}
		params.Push(vA.join("="));	
	});
	if(count==parameters.length) {
		params.Push([newParameter,newValue].join("="));
	}
  params = params.filter(function(el){ return el !== "" });
  if(params.length>1) {
  out += params.join("&");
  } 
  if(params.length==1) {
  out += params[0];
  }	
 }
} else {
if((newParameter.length>0) && (newValue.length>0 || newValue>=0)){
if(location.href.indexOf("?")!==-1) {
var out = "&"+newParameter+"="+newValue;	
} else {
var out = "?"+newParameter+"="+newValue;	
}
}
}
return location.href+out;
}
// if old query parameter is declared but does not exist in url then new parameter and value is simply added if it exists it will be replaced
console.log(changeSearchQueryParameter("ib","idx",5));
// add new parameter and value in url
console.log(changeSearchQueryParameter("","idy",5));
// if no new or old parameter are present url does not change
console.log(changeSearchQueryParameter("","",5));
console.log(changeSearchQueryParameter("","",""));

1
Peter Darmis

quelque chose comme ça?

new_url = "";

if(window.location.search && window.location.search.indexOf('order_by=') != -1)
  new_url = window.location.search.replace( /order_by=\w*\d*/, "order_by=" + data_val);
else if(window.location.search)
  new_url = window.location.search + "&order_by=" + data_val;
else
  new_url = window.location.search + "?order_by=" + data_val;

window.location.href = new_url;
1
Georgiy Dubrov

Pour utiliser le motif Regex, je préfère celui-ci:

var oldUrl = "http://stackoverflow.com/";
var data_val = "newORDER" ;
var r = /^(.+order_by=).+?(&|$)(.*)$/i ;
var newUrl = "";

var matches = oldUrl.match(r) ;
if(matches===null){
  newUrl = oldUrl + ((oldUrl.indexOf("?")>-1)?"&":"?") + "order_by=" + data_val ;
}else{
  newUrl = matches[1]+data_val+matches[2]+matches[3] ;
}
conole.log(newUrl);

Si aucun order_by n'existe, matches est null et order_by=.. devrait venir après ? ou & (si d'autres paramètres existent, le nouveau paramètre nécessite &).

Si order_by existe, matches a 3 items, voir ici

1
MohaMad

Essaye ça:

Pour lire les paramètres: 

const data = ['example.com?var1=value1&var2=value2&var3=value3', 'example.com?a=2&b=2&order_by=data']

const getParameters = url => {
  const parameters = url.split('?')[1],
        regex = /(\w+)=(\w+)/g,
        obj = {}
  let temp
  while (temp = regex.exec(parameters)){
    obj[temp[1]] = decodeURIComponent(temp[2])
  }
  return obj
}

for(let url of data){
  console.log(getParameters(url))
}

Pour ne placer que ces paramètres: 

const data = ['example.com?zzz=asd']
const parameters = {a:1, b:2, add: "abs"}

const setParameters = (url, parameters) => {
  const keys = Object.keys(parameters)
  let temp = url.split('?')[0] += '?'
  for (let i = 0; i < keys.length; i++) {
    temp += `${keys[i]}=${parameters[keys[i]]}${i  == keys.length - 1 ? '' : '&'}`
  }
  return temp
}

for (let url of data){
  console.log(setParameters(url, parameters))
}

Et enfin pour l'insertion (ou le remplacer tant qu'il existe)

const data = ['example.com?a=123&b=3&sum=126']
const parameters = {order_by: 'abc', a: 11}
const insertParameters = (url, parameters) => {
  const keys = Object.keys(parameters)
  let result = url
  for (let i = 0; i < keys.length; i++){
    if (result.indexOf(keys[i]) === -1) {
      result += `&${keys[i]}=${encodeURIComponent(parameters[keys[i]])}`
    } else {
      let regex = new RegExp(`${keys[i]}=(\\w+)`)
      result = result.replace(regex, `&${keys[i]}=${encodeURIComponent(parameters[keys[i]])}`)
    }
  }
  return result
}

for (let url of data){
  console.log(insertParameters(url, parameters))
}

J'espère que cela fonctionne pour vous;) Après avoir utilisé la fonction, remplacez simplement window.location.href

1
Maciej Kozieja