web-dev-qa-db-fra.com

Mise à jour des valeurs de chaîne de requête d'URL existantes avec jQuery

Disons que j'ai une URL telle que:

http://www.example.com/hello.png?w=100&h=100&bg=white

Ce que j'aimerais faire, c'est mettre à jour les valeurs des chaînes de requête w et h, tout en laissant la chaîne de requête bg intacte, par exemple:

http://www.example.com/hello.png?w=200&h=200&bg=white

Alors, quel est le moyen le plus rapide et le plus efficace de lire les valeurs de chaîne de requête (et ce peut être n’importe quel jeu de valeurs de chaîne de requête, pas seulement w, h et bg), de mettre à jour quelques valeurs ou aucune chaîne de requête?

Alors:

  1. Obtenir les valeurs de chaque clé de chaîne de requête
  2. Mettre à jour un nombre quelconque de clés
  3. Reconstruire l'URL avec les nouvelles valeurs
  4. Conservez toutes les autres valeurs qui n'ont pas été mises à jour
  5. Il n'aura pas un ensemble standard de clés connues, cela pourrait changer par URL
javascriptjqueryquery-string
16
adam

Récupère les valeurs de chaîne de requête this way et utilise $ .param pour reconstruire la chaîne de requête

METTRE À JOUR:

Ceci est un exemple, vérifiez également fiddle :

  function getQueryVariable(url, variable) {
  	 var query = url.substring(1);
     var vars = query.split('&');
     for (var i=0; i<vars.length; i++) {
          var pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
     }

     return false;
  }

  var url = 'http://www.example.com/hello.png?w=100&h=100&bg=white';
       
  var w = getQueryVariable(url, 'w');
  var h = getQueryVariable(url, 'h');
  var bg = getQueryVariable(url, 'bg');

  // http://www.example.com/hello.png?w=200&h=200&bg=white
  var params = { 'w':200, 'h':200, 'bg':bg };
  var new_url = 'http://www.example.com/hello.png?' + jQuery.param(params);

Vous pouvez changer la fonction pour utiliser l'URL actuelle:

  function getQueryVariable(variable) {
  	 var query = window.location.search.substring(1);
     var vars = query.split('&');
     for (var i=0; i<vars.length; i++) {
          var pair = vars[i].split('=');
          if (pair[0] == variable) {
            return pair[1];
          }
     }

     return false;
  }

15
dotoree

Autre moyen (indépendant de jQuery ou d’autres bibliothèques): https://github.com/Mikhus/jsurl

var u = new Url;
// or
var u = new Url('/some/path?foo=baz');
alert(u);
u.query.foo = 'bar';
alert(u);
3
Mikhus
//update URL Parameter
function updateURL(key,val){
    var url = window.location.href;
    var reExp = new RegExp("[\?|\&]"+key + "=[0-9a-zA-Z\_\+\-\|\.\,\;]*");

    if(reExp.test(url)) {
        // update
        var reExp = new RegExp("[\?&]" + key + "=([^&#]*)");
        var delimiter = reExp.exec(url)[0].charAt(0);
        url = url.replace(reExp, delimiter + key + "=" + val);
    } else {
        // add
        var newParam = key + "=" + val;
        if(!url.indexOf('?')){url += '?';}

        if(url.indexOf('#') > -1){
            var urlparts = url.split('#');
            url = urlparts[0] +  "&" + newParam +  (urlparts[1] ?  "#" +urlparts[1] : '');
        } else {
            url += "&" + newParam;
        }
    }
    window.history.pushState(null, document.title, url);
}
2
hitchhikers

Solution simple

Vous pouvez utiliser URLSearchParams.set () comme ci-dessous:

var currentUrl = 'http://www.example.com/hello.png?w=100&h=100&bg=white';
var url = new URL(currentUrl);
url.searchParams.set("w", "200"); // setting your param
var newUrl = url.href; 
console.log(newUrl);

Démo en ligne (jsfiddle)

2
Ali Soltani

Mon URL est comme ceci: http: // localhost/dentistryindia/admin/hospital/add_procedure? Hid = 241 & hpr_id = 12

var reExp = /hpr_id=\\d+/;
var url = window.location.href;
url = url.toString(); 
var hrpid = $("#category :selected").val(); //new value to replace hpr_id
var reExp = new RegExp("[\\?&]" + 'hpr_id' + "=([^&#]*)"),
delimeter = reExp.exec(url)[0].charAt(0),
newUrl = url.replace(reExp, delimeter + 'hpr_id' + "=" + hrpid);
window.location.href = newUrl;

Voilà comment cela a fonctionné pour moi. 

0
chandoo

Vous pouvez faire quelque chose comme ça:

// If key exists updates the value
if (location.href.indexOf('key=') > -1) {
    location.href = location.href.replace('key=current_val', 'key=new_val');

// If not, append
} else {
     location.href = location.href + '&key=new_val';
}

Cordialement

0
Nicolas Finelli

Une autre façon de faire cela, en utilisant un simple code reg ex de Samuel Santos ici comme ceci:

/*
 * queryParameters -> handles the query string parameters
 * queryString -> the query string without the fist '?' character
 * re -> the regular expression
 * m -> holds the string matching the regular expression
 */
var queryParameters = {}, queryString = location.search.substring(1),
        re = /([^&=]+)=([^&]*)/g, m;

// Creates a map with the query string parameters
while (m = re.exec(queryString)) {
    queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
}

// Update w and h
queryParameters['w'] = 200;
queryParameters['h'] = 200;

Maintenant, vous pouvez soit créer une nouvelle URL:

var url = window.location.protocol + '//' + window.location.hostname + window.location.pathname;

// Build new Query String
var params = $.param(queryParameters);
if (params != '') {
    url = url + '?' + params;
}

OU vous pouvez simplement utiliser les paramètres pour provoquer le rechargement immédiat du navigateur:

location.search = params;

OU faites ce que vous voulez avec :)

0
PanPipes

J'aime la réponse d'Ali le meilleur. J'ai nettoyé le code en une fonction et j'ai pensé le partager pour faciliter la vie de quelqu'un d'autre. J'espère que ça aide quelqu'un.

function addParam(currentUrl,key,val) {
    var url = new URL(currentUrl);
    url.searchParams.set(key, val);
    return url.href; 
}
0
user1254723