Comment ajouter ou mettre à jour un paramètre de chaîne de requête ?

Question

Avec javascript, comment puis-je ajouter un paramètre de chaîne de requête à l'url s'il n'est pas présent ou, s'il est présent, mettre à jour la valeur actuelle ? J'utilise jquery pour mon développement côté client.

Answer 1

J'ai écrit la fonction suivante qui accomplit ce que je veux réaliser :

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;
  }
}

Answer 2

J'ai élargi la solution et l'ai combinée avec une autre que j'ai trouvée pour remplacer/modifier/supprimer les paramètres de la chaîne de requête en fonction de la saisie des utilisateurs et en tenant compte de l'ancre des urls.

Ne pas fournir de valeur supprimera le paramètre, en fournir une ajoutera/mettra à jour le paramètre. Si aucune URL n'est fournie, elle sera récupérée à partir de window.location.

function UpdateQueryString(key, value, url) {
    if (!url) url = window.location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"),
        hash;

    if (re.test(url)) {
        if (typeof value !== 'undefined' && value !== null) {
            return url.replace(re, '$1' + key + "=" + value + '$2$3');
        } 
        else {
            hash = url.split('#');
            url = hash[0].replace(re, '$1$3').replace(/(&|\?)$/, '');
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
                url += '#' + hash[1];
            }
            return url;
        }
    }
    else {
        if (typeof value !== 'undefined' && value !== null) {
            var separator = url.indexOf('?') !== -1 ? '&' : '?';
            hash = url.split('#');
            url = hash[0] + separator + key + '=' + value;
            if (typeof hash[1] !== 'undefined' && hash[1] !== null) {
                url += '#' + hash[1];
            }
            return url;
        }
        else {
            return url;
        }
    }
}

Mise à jour

Il y avait un bug lors de la suppression du premier paramètre dans la chaîne de requête, j'ai retravaillé la regex et le test pour inclure une correction.

Deuxième mise à jour

Comme suggéré par @JarónBarends - Modifier la vérification des valeurs pour qu'elles soient vérifiées par rapport à undefined et null afin de permettre la définition de valeurs 0

Troisième mise à jour

Il y avait un problème où la suppression d'une variable querystring directement avant un hashtag entraînait la perte du symbole de hashtag.

Quatrième mise à jour

Merci @rooby d'avoir signalé une optimisation regex dans le premier objet RegExp. Définir la regex initiale à ([?&]) en raison d'un problème avec l'utilisation de (\?|&) trouvé par @YonatanKarni.

Cinquième mise à jour

Suppression de la déclaration de la variable hash dans l'instruction if/else

Answer 3

En me basant sur la réponse de @amateur (et en incorporant maintenant la correction du commentaire de @j_walker_dev), mais en tenant compte du commentaire sur les balises de hachage dans l'url, j'utilise ce qui suit :

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  } else {
    var hash =  '';
    if( uri.indexOf('#') !== -1 ){
        hash = uri.replace(/.*#/, '#');
        uri = uri.replace(/#.*/, '');
    }
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";    
    return uri + separator + key + "=" + value + hash;
  }
}

Edité pour fixer [?|&] en regex qui devrait bien sûr être [?&] comme indiqué dans les commentaires

Edit : Version alternative pour supporter la suppression des paramètres d'URL également. J'ai utilisé value === undefined comme moyen d'indiquer la suppression. On pourrait utiliser value === false ou même un paramètre d'entrée séparé, selon les besoins.

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|#|$)", "i");
  if( value === undefined ) {
    if (uri.match(re)) {
        return uri.replace(re, '$1$2');
    } else {
        return uri;
    }
  } else {
    if (uri.match(re)) {
        return uri.replace(re, '$1' + key + "=" + value + '$2');
    } else {
    var hash =  '';
    if( uri.indexOf('#') !== -1 ){
        hash = uri.replace(/.*#/, '#');
        uri = uri.replace(/#.*/, '');
    }
    var separator = uri.indexOf('?') !== -1 ? "&" : "?";    
    return uri + separator + key + "=" + value + hash;
  }
  }  
}

Voyez-le en action à https://jsfiddle.net/bp3tmuxh/1/

Answer 4

Voici ma bibliothèque pour y parvenir : https://github.com/Mikhus/jsurl

var u = new Url;
u.query.param='value'; // adds or replaces the param
alert(u)

Answer 5

Window.location.search est en lecture/écriture.

Cependant, la modification de la chaîne d'interrogation redirigera la page sur laquelle vous vous trouvez et entraînera une actualisation du serveur.

Si ce que vous tentez de faire est de maintenir l'état côté client (et potentiellement de le rendre compatible avec les signets), vous voudrez modifier le hachage de l'URL au lieu de la chaîne de requête, ce qui vous permet de rester sur la même page (window.location.hash est en lecture/écriture). C'est ainsi que les sites Web comme twitter.com procèdent.

Si vous voulez que le bouton retour fonctionne, vous devez lier des événements javascript à l'événement de changement de hachage. http://benalman.com/projects/jquery-hashchange-plugin/