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

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.

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

J'ai étendu la solution et l'ai combinée avec une autre que j'ai trouvée pour remplacer / mettre à jour / supprimer les paramètres de la chaîne de requête en fonction de l'entrée des utilisateurs et en tenant compte de l'ancre des URL.

Ne pas fournir de valeur supprimera le paramètre, en fournir un 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é l'expression régulière et testé pour inclure un correctif.

Deuxième mise à jour

Comme suggéré par @ JarónBarends - Vérifiez la valeur de réglage pour vérifier par rapport à undefined et null pour autoriser la définition de valeurs 0

Troisième mise à jour

Il y avait un bogue où la suppression d'une variable de chaîne de requête directement avant un hashtag perdrait le symbole du hashtag qui a été corrigé

Quatrième mise à jour

Merci à @rooby d'avoir signalé une optimisation d'expression régulière dans le premier objet RegExp. Réglez l'expression régulière sur ([? &]) En raison d'un problème avec l'utilisation de (\? | &) Trouvé par @YonatanKarni

Cinquième mise à jour

Suppression de la déclaration de hachage var dans l'instruction if / else

le utilitaire URLSearchParams peut être utile pour cela en combinaison avec window.location.search. Par exemple:

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set("foo", "bar");
    window.location.search = searchParams.toString();
}

Maintenant, il fooa été défini sur barqu'il existe ou non.

Cependant, l'affectation ci-dessus window.location.searchentraînera un chargement de page, donc si ce n'est pas souhaitable, utilisez le API Historique comme suit:

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search)
    searchParams.set("foo", "bar");
    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
    history.pushState(null, '', newRelativePathQuery);
}

Maintenant, vous n'avez plus besoin d'écrire votre propre expression rationnelle ou logique pour gérer l'existence possible de chaînes de requête.

Cependant, la prise en charge du navigateur est médiocre car elle est actuellement expérimentale et n'est utilisée que dans les versions récentes de Chrome, Firefox, Safari, iOS Safari, navigateur Android, Android Chrome et Opera. À utiliser avec un polyfill si vous décidez de l'utiliser.

Mise à jour: le support du navigateur s'est amélioré depuis ma réponse d'origine.

Basé sur la réponse de @ amateur (et intégrant maintenant le correctif du commentaire @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;
  }
}

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

Modifier: version alternative pour prendre également en charge la suppression des paramètres d'URL. J'ai utilisé value === undefinedcomme moyen d'indiquer la suppression. Pourrait utiliser value === falseou même un paramètre d'entrée séparé comme souhaité.

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 sur https://jsfiddle.net/bp3tmuxh/1/

Voici ma bibliothèque pour le faire: https://github.com/Mikhus/jsurl

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

Je me rends compte que cette question est ancienne et qu'il a été répondu à mort, mais voici mon coup de poignard. J'essaie de réinventer la roue ici parce que j'utilisais la réponse actuellement acceptée et la mauvaise gestion des fragments d'URL m'a récemment mordu dans un projet.

La fonction est ci-dessous. C'est assez long, mais il a été conçu pour être aussi résistant que possible. J'adorerais des suggestions pour le raccourcir / l'améliorer. J'ai mis en place une petite suite de tests jsFiddle pour cela (ou d'autres fonctions similaires). Si une fonction peut réussir chacun des tests là-bas, je dis que c'est probablement bien d'y aller.

Mise à jour: je suis tombé sur une fonction intéressante pour utiliser le DOM pour analyser les URL , j'ai donc incorporé cette technique ici. Il rend la fonction plus courte et plus fiable. Accessoires à l'auteur de cette fonction.

/**
 * Add or update a query string parameter. If no URI is given, we use the current
 * window.location.href value for the URI.
 * 
 * Based on the DOM URL parser described here:
 * http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
 *
 * @param   (string)    uri     Optional: The URI to add or update a parameter in
 * @param   (string)    key     The key to add or update
 * @param   (string)    value   The new value to set for key
 *
 * Tested on Chrome 34, Firefox 29, IE 7 and 11
 */
function update_query_string( uri, key, value ) {

    // Use window URL if no query string is provided
    if ( ! uri ) { uri = window.location.href; }

    // Create a dummy element to parse the URI with
    var a = document.createElement( 'a' ), 

        // match the key, optional square brackets, an equals sign or end of string, the optional value
        reg_ex = new RegExp( key + '((?:\\[[^\\]]*\\])?)(=|$)(.*)' ),

        // Setup some additional variables
        qs,
        qs_len,
        key_found = false;

    // Use the JS API to parse the URI 
    a.href = uri;

    // If the URI doesn't have a query string, add it and return
    if ( ! a.search ) {

        a.search = '?' + key + '=' + value;

        return a.href;
    }

    // Split the query string by ampersands
    qs = a.search.replace( /^\?/, '' ).split( /&(?:amp;)?/ );
    qs_len = qs.length; 

    // Loop through each query string part
    while ( qs_len > 0 ) {

        qs_len--;

        // Remove empty elements to prevent double ampersands
        if ( ! qs[qs_len] ) { qs.splice(qs_len, 1); continue; }

        // Check if the current part matches our key
        if ( reg_ex.test( qs[qs_len] ) ) {

            // Replace the current value
            qs[qs_len] = qs[qs_len].replace( reg_ex, key + '$1' ) + '=' + value;

            key_found = true;
        }
    }   

    // If we haven't replaced any occurrences above, add the new parameter and value
    if ( ! key_found ) { qs.push( key + '=' + value ); }

    // Set the new query string
    a.search = '?' + qs.join( '&' );

    return a.href;
}

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

Cependant, la modification de la chaîne de requête redirigera la page sur laquelle vous vous trouvez et provoquera une actualisation à partir du serveur.

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

Vous voudrez également que le bouton de retour fonctionne, vous devrez lier les événements javascript à l'événement de changement de hachage, un bon plugin pour cela est http://benalman.com/projects/jquery-hashchange-plugin/

S'il n'est pas défini ou si vous souhaitez mettre à jour avec une nouvelle valeur, vous pouvez utiliser:

window.location.search = 'param=value'; // or param=new_value

C'est en Javascript simple, soit dit en passant.

ÉDITER

Vous voudrez peut-être essayer d'utiliser le plugin jquery query-object

window.location.search = jQuery.query.set ("param", 5);

Voici mon approche: le location.params() fonction (illustrée ci-dessous) peut être utilisée comme getter ou setter. Exemples:

Étant donné que l'URL est http://example.com/?foo=bar&baz#some-hash,

1. location.params()retourne un objet avec tous les paramètres de la requête: {foo: 'bar', baz: true}.
2. location.params('foo')reviendra 'bar'.
3. location.params({foo: undefined, hello: 'world', test: true})changera l'URL en http://example.com/?baz&hello=world&test#some-hash.

Voici la params()fonction, qui peut éventuellement être affectée à l' window.locationobjet.

location.params = function(params) {
  var obj = {}, i, parts, len, key, value;

  if (typeof params === 'string') {
    value = location.search.match(new RegExp('[?&]' + params + '=?([^&]*)[&#$]?'));
    return value ? value[1] : undefined;
  }

  var _params = location.search.substr(1).split('&');

  for (i = 0, len = _params.length; i < len; i++) {
    parts = _params[i].split('=');
    if (! parts[0]) {continue;}
    obj[parts[0]] = parts[1] || true;
  }

  if (typeof params !== 'object') {return obj;}

  for (key in params) {
    value = params[key];
    if (typeof value === 'undefined') {
      delete obj[key];
    } else {
      obj[key] = value;
    }
  }

  parts = [];
  for (key in obj) {
    parts.push(key + (obj[key] === true ? '' : '=' + obj[key]));
  }

  location.search = parts.join('&');
};

C'est ma préférence, et elle couvre les cas auxquels je peux penser. Quelqu'un peut-il penser à un moyen de le réduire à un seul remplacement?

function setParam(uri, key, val) {
    return uri
        .replace(RegExp("([?&]"+key+"(?=[=&#]|$)[^#&]*|(?=#|$))"), "&"+key+"="+encodeURIComponent(val))
        .replace(/^([^?&]+)&/, "$1?");
}

Je sais que c'est assez ancien mais je veux lancer ma version de travail ici.

function addOrUpdateUrlParam(uri, paramKey, paramVal) {
  var re = new RegExp("([?&])" + paramKey + "=[^&#]*", "i");
  if (re.test(uri)) {
    uri = uri.replace(re, '$1' + paramKey + "=" + paramVal);
  } else {
    var separator = /\?/.test(uri) ? "&" : "?";
    uri = uri + separator + paramKey + "=" + paramVal;
  }
  return uri;
}

jQuery(document).ready(function($) {
  $('#paramKey,#paramValue').on('change', function() {
    if ($('#paramKey').val() != "" && $('#paramValue').val() != "") {
      $('#uri').val(addOrUpdateUrlParam($('#uri').val(), $('#paramKey').val(), $('#paramValue').val()));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input style="width:100%" type="text" id="uri" value="http://www.example.com/text.php">
<label style="display:block;">paramKey
  <input type="text" id="paramKey">
</label>
<label style="display:block;">paramValue
  <input type="text" id="paramValue">
</label>

REMARQUE Il s'agit d'une version modifiée de @elreimundo

Ma prise d'ici (compatible avec "use strict"; n'utilise pas vraiment jQuery):

function decodeURIParams(query) {
  if (query == null)
    query = window.location.search;
  if (query[0] == '?')
    query = query.substring(1);

  var params = query.split('&');
  var result = {};
  for (var i = 0; i < params.length; i++) {
    var param = params[i];
    var pos = param.indexOf('=');
    if (pos >= 0) {
        var key = decodeURIComponent(param.substring(0, pos));
        var val = decodeURIComponent(param.substring(pos + 1));
        result[key] = val;
    } else {
        var key = decodeURIComponent(param);
        result[key] = true;
    }
  }
  return result;
}

function encodeURIParams(params, addQuestionMark) {
  var pairs = [];
  for (var key in params) if (params.hasOwnProperty(key)) {
    var value = params[key];
    if (value != null) /* matches null and undefined */ {
      pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
    }
  }
  if (pairs.length == 0)
    return '';
  return (addQuestionMark ? '?' : '') + pairs.join('&');
}

//// alternative to $.extend if not using jQuery:
// function mergeObjects(destination, source) {
//   for (var key in source) if (source.hasOwnProperty(key)) {
//     destination[key] = source[key];
//   }
//   return destination;
// }

function navigateWithURIParams(newParams) {
  window.location.search = encodeURIParams($.extend(decodeURIParams(), newParams), true);
}

Exemple d'utilisation:

// add/update parameters
navigateWithURIParams({ foo: 'bar', boz: 42 });

// remove parameter
navigateWithURIParams({ foo: null });

// submit the given form by adding/replacing URI parameters (with jQuery)
$('.filter-form').submit(function(e) {
  e.preventDefault();
  navigateWithURIParams(decodeURIParams($(this).serialize()));
});

Sur la base de la réponse donnée par @ellemayo, j'ai trouvé la solution suivante qui permet de désactiver la balise de hachage si vous le souhaitez:

function updateQueryString(key, value, options) {
    if (!options) options = {};

    var url = options.url || location.href;
    var re = new RegExp("([?&])" + key + "=.*?(&|#|$)(.*)", "gi"), hash;

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

    if ((typeof options.hash === 'undefined' || options.hash) &&
        typeof hash[1] !== 'undefined' && hash[1] !== null)
        url += '#' + hash[1];
    return url;
}

Appelez ça comme ceci:

updateQueryString('foo', 'bar', {
    url: 'http://my.example.com#hash',
    hash: false
});

Résulte en:

http://my.example.com?foo=bar

Voici une version plus courte qui prend en charge

• requête avec ou sans paramètre donné
• requête avec plusieurs valeurs de paramètre
• requête contenant du hachage

Code:

var setQueryParameter = function(uri, key, value) {
  var re = new RegExp("([?&])("+ key + "=)[^&#]*", "g");
  if (uri.match(re)) 
    return uri.replace(re, '$1$2' + value);

  // need to add parameter to URI
  var paramString = (uri.indexOf('?') < 0 ? "?" : "&") + key + "=" + value;
  var hashIndex = uri.indexOf('#');
  if (hashIndex < 0)
    return uri + paramString;
  else
    return uri.substring(0, hashIndex) + paramString + uri.substring(hashIndex);
}

La description de l' expression régulière peut être trouvée ici .

REMARQUE : Cette solution est basée sur la réponse @amateur, mais avec de nombreuses améliorations.

Code qui ajoute une liste de paramètres à une URL existante à l'aide d'ES6 et de jQuery:

class UrlBuilder {
    static appendParametersToUrl(baseUrl, listOfParams) {

        if (jQuery.isEmptyObject(listOfParams)) {
            return baseUrl;
        }

        const newParams = jQuery.param(listOfParams);

        let partsWithHash = baseUrl.split('#');
        let partsWithParams = partsWithHash[0].split('?');

        let previousParams = '?' + ((partsWithParams.length === 2) ? partsWithParams[1] + '&' : '');
        let previousHash = (partsWithHash.length === 2) ? '#' + partsWithHash[1] : '';

        return partsWithParams[0] + previousParams + newParams + previousHash;
    }
}

Où listOfParams est comme

const listOfParams = {
    'name_1': 'value_1',
    'name_2': 'value_2',
    'name_N': 'value_N',
};

Exemple d'utilisation:

    UrlBuilder.appendParametersToUrl(urlBase, listOfParams);

Tests rapides:

    url = 'http://hello.world';
    console.log('=> ', UrlParameters.appendParametersToUrl(url, null));
    // Output:  http://hello.world

    url = 'http://hello.world#h1';
    console.log('=> ', UrlParameters.appendParametersToUrl(url, null));
    // Output:  http://hello.world#h1

    url = 'http://hello.world';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
    // Output: http://hello.world?p1=v1&p2=v2

    url = 'http://hello.world?p0=v0';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
    // Output: http://hello.world?p0=v0&p1=v1&p2=v2

    url = 'http://hello.world#h1';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
   // Output: http://hello.world?p1=v1&p2=v2#h1

    url = 'http://hello.world?p0=v0#h1';
    params = {'p1': 'v1', 'p2': 'v2'};
    console.log('=> ', UrlParameters.appendParametersToUrl(url, params));
    // Output: http://hello.world?p0=v0&p1=v1&p2=v2#h1

Une approche différente sans utiliser d'expressions régulières . Prend en charge les ancres de hachage à la fin de l'URL ainsi que plusieurs caractères de point d'interrogation (?). Devrait être légèrement plus rapide que l'approche par expression régulière.

function setUrlParameter(url, key, value) {
  var parts = url.split("#", 2), anchor = parts.length > 1 ? "#" + parts[1] : '';
  var query = (url = parts[0]).split("?", 2);
  if (query.length === 1) 
    return url + "?" + key + "=" + value + anchor;

  for (var params = query[query.length - 1].split("&"), i = 0; i < params.length; i++)
    if (params[i].toLowerCase().startsWith(key.toLowerCase() + "="))
      return params[i] = key + "=" + value, query[query.length - 1] = params.join("&"), query.join("?") + anchor;

  return url + "&" + key + "=" + value + anchor
}

Utilisez cette fonction pour ajouter, supprimer et modifier le paramètre de chaîne de requête de l'URL basé sur jquery

/**
@param String url
@param object param {key: value} query parameter
*/
function modifyURLQuery(url, param){
    var value = {};

    var query = String(url).split('?');

    if (query[1]) {
        var part = query[1].split('&');

        for (i = 0; i < part.length; i++) {
            var data = part[i].split('=');

            if (data[0] && data[1]) {
                value[data[0]] = data[1];
            }
        }
    }

    value = $.extend(value, param);

    // Remove empty value
    for (i in value){
        if(!value[i]){
            delete value[i];
        }
    }

    // Return url with modified parameter
    if(value){
        return query[0] + '?' + $.param(value);
    } else {
        return query[0];
    }
}

Ajouter un nouveau paramètre et le modifier à l'URL

var new_url = modifyURLQuery("http://google.com?foo=34", {foo: 50, bar: 45});
// Result: http://google.com?foo=50&bar=45

Supprimer l'existant

var new_url = modifyURLQuery("http://google.com?foo=50&bar=45", {bar: null});
// Result: http://google.com?foo=50

En utilisant, jQuerynous pouvons faire comme ci-dessous

var query_object = $.query_string;
query_object["KEY"] = "VALUE";
var new_url = window.location.pathname + '?'+$.param(query_object)

En variable new_url nous aurons de nouveaux paramètres de requête.

Référence: http://api.jquery.com/jquery.param/

Pour donner un exemple de code à modifier window.location.searchcomme suggéré par Gal et tradyblix:

var qs = window.location.search || "?";
var param = key + "=" + value; // remember to URI encode your parameters
if (qs.length > 1) {
    // more than just the question mark, so append with ampersand
    qs = qs + "&";
}
qs = qs + param;
window.location.search = qs;

Code de script Java pour rechercher une chaîne de requête spécifique et remplacer sa valeur *

('input.letter').click(function () {
                //0- prepare values
                var qsTargeted = 'letter=' + this.value; //"letter=A";
                var windowUrl = '';
                var qskey = qsTargeted.split('=')[0];
                var qsvalue = qsTargeted.split('=')[1];
                //1- get row url
                var originalURL = window.location.href;
                //2- get query string part, and url
                if (originalURL.split('?').length > 1) //qs is exists
                {
                    windowUrl = originalURL.split('?')[0];
                    var qs = originalURL.split('?')[1];
                    //3- get list of query strings
                    var qsArray = qs.split('&');
                    var flag = false;
                    //4- try to find query string key
                    for (var i = 0; i < qsArray.length; i++) {
                        if (qsArray[i].split('=').length > 0) {
                            if (qskey == qsArray[i].split('=')[0]) {
                                //exists key
                                qsArray[i] = qskey + '=' + qsvalue;
                                flag = true;
                                break;
                            }
                        }
                    }
                    if (!flag)//   //5- if exists modify,else add
                    {
                        qsArray.push(qsTargeted);
                    }
                    var finalQs = qsArray.join('&');
                    //6- prepare final url
                    window.location = windowUrl + '?' + finalQs;
                }
                else {
                    //6- prepare final url
                    //add query string
                    window.location = originalURL + '?' + qsTargeted;
                }
            })
        });

Oui, j'ai eu un problème où ma chaîne de requête débordait et se dupliquait, mais cela était dû à ma propre lenteur. donc j'ai joué un peu et travaillé sur js jquery (en fait grésillement) et C # magick.

Donc je viens de réaliser qu'après que le serveur a fini avec les valeurs passées, les valeurs n'ont plus d'importance, il n'y a pas de réutilisation, si le client voulait faire la même chose évidemment, ce sera toujours une nouvelle demande, même si c'est la mêmes paramètres étant passés. Et c'est tout côté client, donc certains cache / cookies, etc. pourraient être cool à cet égard.

JS:

$(document).ready(function () {
            $('#ser').click(function () {
                SerializeIT();
            });
            function SerializeIT() {
                var baseUrl = "";
                baseUrl = getBaseUrlFromBrowserUrl(window.location.toString());
                var myQueryString = "";
                funkyMethodChangingStuff(); //whatever else before serializing and creating the querystring
                myQueryString = $('#fr2').serialize();
                window.location.replace(baseUrl + "?" + myQueryString);
            }
            function getBaseUrlFromBrowserUrl(szurl) {
                return szurl.split("?")[0];
            } 
            function funkyMethodChangingStuff(){
               //do stuff to whatever is in fr2
            }
        });

HTML:

<div id="fr2">
   <input type="text" name="qURL" value="http://somewhere.com" />
   <input type="text" name="qSPart" value="someSearchPattern" />
</div>
<button id="ser">Serialize! and go play with the server.</button>

C #:

    using System.Web;
    using System.Text;
    using System.Collections.Specialized;

    public partial class SomeCoolWebApp : System.Web.UI.Page
    {
        string weburl = string.Empty;
        string partName = string.Empty;

        protected void Page_Load(object sender, EventArgs e)
        {
            string loadurl = HttpContext.Current.Request.RawUrl;
            string querySZ = null;
            int isQuery = loadurl.IndexOf('?');
            if (isQuery == -1) { 
                //If There Was no Query
            }
            else if (isQuery >= 1) {
                querySZ = (isQuery < loadurl.Length - 1) ? loadurl.Substring(isQuery + 1) : string.Empty;
                string[] getSingleQuery = querySZ.Split('?');
                querySZ = getSingleQuery[0];

                NameValueCollection qs = null;
                qs = HttpUtility.ParseQueryString(querySZ);

                weburl = qs["qURL"];
                partName = qs["qSPart"];
                //call some great method thisPageRocks(weburl,partName); or whatever.
          }
      }
  }

La critique est la bienvenue (c'était une concoction nocturne, alors n'hésitez pas à noter les ajustements). Si cela vous a aidé du tout, faites-le, Happy Coding.

Pas de doublons, chaque demande est aussi unique que vous l'avez modifiée, et en raison de la façon dont celle-ci est structurée, il est facile d'ajouter dynamiquement plus de requêtes depuis le dom.

Voici une méthode alternative utilisant les propriétés intégrées de l'élément HTML d'ancrage:

• Gère les paramètres à valeurs multiples.
• Aucun risque de modifier le fragment # ou autre chose que la chaîne de requête elle-même.
• Peut-être un peu plus facile à lire? Mais c'est plus long.

    var a = document.createElement('a'),

	getHrefWithUpdatedQueryString = function(param, value) {
	    return updatedQueryString(window.location.href, param, value);
	},

	updatedQueryString = function(url, param, value) {
	    /*
	     A function which modifies the query string 
             by setting one parameter to a single value.

	     Any other instances of parameter will be removed/replaced.
	     */
	    var fragment = encodeURIComponent(param) + 
                           '=' + encodeURIComponent(value);

	    a.href = url;

	    if (a.search.length === 0) {
		a.search = '?' + fragment;
	    } else {
		var didReplace = false,
		    // Remove leading '?'
		    parts = a.search.substring(1)
		// Break into pieces
			.split('&'),

		    reassemble = [],
		    len = parts.length;

		for (var i = 0; i < len; i++) {
		    
		    var pieces = parts[i].split('=');
		    if (pieces[0] === param) {
			if (!didReplace) {
			    reassemble.push('&' + fragment);
			    didReplace = true;
			}
		    } else {
			reassemble.push(parts[i]);
		    }
		}

		if (!didReplace) {
		    reassemble.push('&' + fragment);
		}

		a.search = reassemble.join('&');
	    }

	    return a.href;
	};

si vous souhaitez définir plusieurs paramètres à la fois:

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

même fonction que chez amateur

si jslint vous donne une erreur, ajoutez ceci après la boucle for

if(params.hasOwnProperty(key))

Il y a beaucoup de réponses maladroites et inutilement compliquées sur cette page. La note la plus élevée, @ amateur, est assez bonne, bien qu'elle ait un peu de peluches inutiles dans le RegExp. Voici une solution légèrement plus optimale avec un nettoyant RegExp et un replaceappel plus propre :

function updateQueryStringParamsNoHash(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=[^&]*", "i");
  return re.test(uri)
       ? uri.replace(re, '$1' + key + "=" + value)
       : uri + separator + key + "=" + value
  ;
}

En prime, s'il urine s'agit pas d'une chaîne, vous n'obtiendrez pas d'erreurs en essayant d'appeler matchou replacesur quelque chose qui peut ne pas implémenter ces méthodes.

Et si vous souhaitez gérer le cas d'un hachage (et que vous avez déjà vérifié le format HTML correctement formaté), vous pouvez tirer parti de la fonction existante au lieu d'écrire une nouvelle fonction contenant la même logique:

function updateQueryStringParams(url, key, value) {
    var splitURL = url.split('#');
    var hash = splitURL[1];
    var uri = updateQueryStringParamsNoHash(splitURL[0]);
    return hash == null ? uri : uri + '#' + hash;
}

Ou vous pouvez apporter de légères modifications à la réponse par ailleurs excellente de @ Adam:

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=[^&#]*", "i");
  if (re.test(uri)) {
    return uri.replace(re, '$1' + key + "=" + value);
  } else {
    var matchData = uri.match(/^([^#]*)(#.*)?$/);
    var separator = /\?/.test(uri) ? "&" : "?";    
    return matchData[0] + separator + key + "=" + value + (matchData[1] || '');
  }
}

Cela devrait servir le but:

function updateQueryString(url, key, value) {
    var arr =  url.split("#");
    var url = arr[0];
    var fragmentId = arr[1];
    var updatedQS = "";
    if (url.indexOf("?") == -1) {
        updatedQS = encodeURIComponent(key) + "=" + encodeURIComponent(value);
    }
    else {
        updatedQS = addOrModifyQS(url.substring(url.indexOf("?") + 1), key, value); 
    }
    url = url.substring(0, url.indexOf("?")) + "?" + updatedQS;
    if (typeof fragmentId !== 'undefined') {
        url = url + "#" + fragmentId;
    }
    return url;
}

function addOrModifyQS(queryStrings, key, value) {
    var oldQueryStrings = queryStrings.split("&");
    var newQueryStrings = new Array();
    var isNewKey = true;
    for (var i in oldQueryStrings) {
        var currItem = oldQueryStrings[i];
        var searchKey = key + "=";
        if (currItem.indexOf(searchKey) != -1) {
            currItem = encodeURIComponent(key) + "=" + encodeURIComponent(value);
            isNewKey = false;
        }
        newQueryStrings.push(currItem);
    }
    if (isNewKey) {
        newQueryStrings.push(encodeURIComponent(key) + "=" + encodeURIComponent(value));
    }
    return newQueryStrings.join("&");
}