web-dev-qa-db-fra.com

Ajout d'un paramètre à l'URL avec JavaScript

Dans une application Web qui utilise les appels AJAX, je dois soumettre une demande mais ajouter un paramètre à la fin de l'URL, par exemple:

URL d'origine:

http: //server/myapp.php? id = 1

URL résultante:

http: //server/myapp.php? id = 1 & enabled = true

Vous recherchez une fonction JavaScript qui analyse l'URL en examinant chaque paramètre, puis ajoute le nouveau paramètre ou met à jour la valeur s'il en existe déjà une.

javascripturlparsingparametersquery-string
225
Lessan Vaezi

Une implémentation de base que vous devrez adapter ressemblerait à ceci:

function insertParam(key, value)
{
    key = encodeURI(key); value = encodeURI(value);

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

    var i=kvp.length; var x; while(i--) 
    {
        x = kvp[i].split('=');

        if (x[0]==key)
        {
            x[1] = value;
            kvp[i] = x.join('=');
            break;
        }
    }

    if(i<0) {kvp[kvp.length] = [key,value].join('=');}

    //this will reload the page, it's likely better to store this until finished
    document.location.search = kvp.join('&'); 
}

Ceci est environ deux fois plus rapide qu'une solution basée sur l'expression rationnelle ou la recherche, mais cela dépend complètement de la longueur de la chaîne de requête et de l'index de toute correspondance.

la méthode de regex lente que j'ai comparée à des fins de complétions (environ 150% plus lente)

function insertParam2(key,value)
{
    key = encodeURIComponent(key); value = encodeURIComponent(value);

    var s = document.location.search;
    var kvp = key+"="+value;

    var r = new RegExp("(&|\\?)"+key+"=[^\&]*");

    s = s.replace(r,"$1"+kvp);

    if(!RegExp.$1) {s += (s.length>0 ? '&' : '?') + kvp;};

    //again, do what you will here
    document.location.search = s;
}
178
annakata

Vous pouvez utiliser l'un de ceux-ci:

Exemple:

var url = new URL("http://foo.bar/?x=1&y=2");

// If your expected result is "http://foo.bar/?x=1&y=2&x=42"
url.searchParams.append('x', 42);

// If your expected result is "http://foo.bar/?x=42&y=2"
url.searchParams.set('x', 42);
187
Vianney Bajart

Merci à tous pour votre contribution. J'ai utilisé le code annakata et modifié pour inclure également le cas où il n'y a aucune chaîne de requête dans l'URL. J'espère que cela aiderait.

function insertParam(key, value) {
        key = escape(key); value = escape(value);

        var kvp = document.location.search.substr(1).split('&');
        if (kvp == '') {
            document.location.search = '?' + key + '=' + value;
        }
        else {

            var i = kvp.length; var x; while (i--) {
                x = kvp[i].split('=');

                if (x[0] == key) {
                    x[1] = value;
                    kvp[i] = x.join('=');
                    break;
                }
            }

            if (i < 0) { kvp[kvp.length] = [key, value].join('='); }

            //this will reload the page, it's likely better to store this until finished
            document.location.search = kvp.join('&');
        }
    }
62
Mehdi

C'est une solution très simple. Sa ne contrôle pas l'existence de paramètre, et il ne change pas la valeur existante. Il ajoute votre paramètre à la fin pour que vous puissiez obtenir la dernière valeur dans votre code back-end.

function addParameterToURL(param){
    _url = location.href;
    _url += (_url.split('?')[1] ? '&':'?') + param;
    return _url;
}
55
Mehmet Fatih Yıldız

Voici une version très simplifiée, qui offre des compromis sur la lisibilité et réduit le nombre de lignes de code au lieu de performances optimisées au niveau micro (et nous parlons d'une différence de quelques millisecondes, de manière réaliste ... en raison de la nature de cette opération (opérant sur l'emplacement du document actuel). ), cela sera probablement exécuté une fois sur une page).

/**
* Add a URL parameter (or changing it if it already exists)
* @param {search} string  this is typically document.location.search
* @param {key}    string  the key to set
* @param {val}    string  value 
*/
var addUrlParam = function(search, key, val){
  var newParam = key + '=' + val,
      params = '?' + newParam;

  // If the "search" string exists, then build params from it
  if (search) {
    // Try to replace an existance instance
    params = search.replace(new RegExp('([?&])' + key + '[^&]*'), '$1' + newParam);

    // If nothing was replaced, then add the new param to the end
    if (params === search) {
      params += '&' + newParam;
    }
  }

  return params;
};

Vous utiliseriez alors ceci comme ceci:

document.location.pathname + addUrlParam(document.location.search, 'foo', 'bar');
33
Garrett
/**
* Add a URL parameter 
* @param {string} url 
* @param {string} param the key to set
* @param {string} value 
*/
var addParam = function(url, param, value) {
   param = encodeURIComponent(param);
   var a = document.createElement('a');
   param += (value ? "=" + encodeURIComponent(value) : ""); 
   a.href = url;
   a.search += (a.search ? "&" : "") + param;
   return a.href;
}

/**
* Add a URL parameter (or modify if already exists)
* @param {string} url 
* @param {string} param the key to set
* @param {string} value 
*/
var addOrReplaceParam = function(url, param, value) {
   param = encodeURIComponent(param);
   var r = "([&?]|&amp;)" + param + "\\b(?:=(?:[^&#]*))*";
   var a = document.createElement('a');
   var regex = new RegExp(r);
   var str = param + (value ? "=" + encodeURIComponent(value) : ""); 
   a.href = url;
   var q = a.search.replace(regex, "$1"+str);
   if (q === a.search) {
      a.search += (a.search ? "&" : "") + str;
   } else {
      a.search = q;
   }
   return a.href;
}

url = "http://www.example.com#hashme";
newurl = addParam(url, "ciao", "1");
alert(newurl);

Et notez que les paramètres doivent être encodés avant d'être ajoutés à la chaîne de requête.

http://jsfiddle.net/48z7z4kx/

20
freedev

J'ai une 'classe' qui fait ça et la voici:

function QS(){
    this.qs = {};
    var s = location.search.replace( /^\?|#.*$/g, '' );
    if( s ) {
        var qsParts = s.split('&');
        var i, nv;
        for (i = 0; i < qsParts.length; i++) {
            nv = qsParts[i].split('=');
            this.qs[nv[0]] = nv[1];
        }
    }
}

QS.prototype.add = function( name, value ) {
    if( arguments.length == 1 && arguments[0].constructor == Object ) {
        this.addMany( arguments[0] );
        return;
    }
    this.qs[name] = value;
}

QS.prototype.addMany = function( newValues ) {
    for( nv in newValues ) {
        this.qs[nv] = newValues[nv];
    }
}

QS.prototype.remove = function( name ) {
    if( arguments.length == 1 && arguments[0].constructor == Array ) {
        this.removeMany( arguments[0] );
        return;
    }
    delete this.qs[name];
}

QS.prototype.removeMany = function( deleteNames ) {
    var i;
    for( i = 0; i < deleteNames.length; i++ ) {
        delete this.qs[deleteNames[i]];
    }
}

QS.prototype.getQueryString = function() {
    var nv, q = [];
    for( nv in this.qs ) {
        q[q.length] = nv+'='+this.qs[nv];
    }
    return q.join( '&' );
}

QS.prototype.toString = QS.prototype.getQueryString;

//examples
//instantiation
var qs = new QS;
alert( qs );

//add a sinle name/value
qs.add( 'new', 'true' );
alert( qs );

//add multiple key/values
qs.add( { x: 'X', y: 'Y' } );
alert( qs );

//remove single key
qs.remove( 'new' )
alert( qs );

//remove multiple keys
qs.remove( ['x', 'bogus'] )
alert( qs );

J'ai remplacé la méthode toString afin qu'il ne soit pas nécessaire d'appeler QS :: getQueryString, vous pouvez utiliser QS :: toString ou, comme je l'ai fait dans les exemples, il suffit de compter sur l'objet qui est forcé dans une chaîne.

19
meouw

Si vous voulez décorer une chaîne avec un URL, vous pouvez essayer ceci:

urlstring += ( urlstring.match( /[\?]/g ) ? '&' : '?' ) + 'param=value';

Cela signifie que ? sera le préfixe du paramètre, mais si vous avez déjà ? dans urlstring, que & sera le préfixe.

Je recommanderais également de faire encodeURI( paramvariable ) si vous n'avez pas de paramètre codé en dur, mais qu'il se trouve à l'intérieur d'un paramvariable; ou si vous avez des personnages amusants.

Voir Encodage d'URL javascript pour l'utilisation de la fonction encodeURI.

7
Sasa

C'est un moyen simple d'ajouter un paramètre de requête:

const query = new URLSearchParams(window.location.search);
query.append("enabled", "true");

Et c'est tout plus ici .

Veuillez noter le support technique .

7
T04435

Parfois, nous voyons ? à l’URL de fin, j’ai trouvé des solutions qui génèrent des résultats sous la forme file.php?&foo=bar. Je suis venu avec ma propre solution fonctionne parfaitement comme je veux!

location.Origin + location.pathname + location.search + (location.search=='' ? '?' : '&') + 'lang=ar'

Remarque: location.Origin ne fonctionne pas dans IE, voici sa solution .

6
Mr.Shan0

Départ https://github.com/derek-watson/jsUri

Uri et manipulation de chaînes de requête en javascript.

Ce projet intègre l'excellente bibliothèque d'expressions régulières parseUri de Steven Levithan. Vous pouvez analyser en toute sécurité des URL de toutes formes et de toutes tailles, même si elles sont invalides ou hideuses.

4
Charlie Liang Yuan

La fonction suivante vous aidera à ajouter, mettre à jour et supprimer des paramètres depuis ou vers une URL.

// exemple1et

var myURL = '/search';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search

// exemple2

var myURL = '/search?category=mobile';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile

// exemple3

var myURL = '/search?location=texas';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search

// exemple4

var myURL = '/search?category=mobile&location=texas';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?category=mobile&location=california

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?category=mobile&location=new%20york

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search?category=mobile

// exemple5

var myURL = 'https://example.com/search?location=texas#fragment';

myURL = updateUrl(myURL,'location','california');
console.log('added location...' + myURL);
//added location.../search?location=california#fragment

myURL = updateUrl(myURL,'location','new york');
console.log('updated location...' + myURL);
//updated location.../search?location=new%20york#fragment

myURL = updateUrl(myURL,'location');
console.log('removed location...' + myURL);
//removed location.../search#fragment

Voici la fonction.

function updateUrl(url,key,value){
      if(value!==undefined){
        value = encodeURI(value);
      }
      var hashIndex = url.indexOf("#")|0;
      if (hashIndex === -1) hashIndex = url.length|0;
      var urls = url.substring(0, hashIndex).split('?');
      var baseUrl = urls[0];
      var parameters = '';
      var outPara = {};
      if(urls.length>1){
          parameters = urls[1];
      }
      if(parameters!==''){
        parameters = parameters.split('&');
        for(k in parameters){
          var keyVal = parameters[k];
          keyVal = keyVal.split('=');
          var ekey = keyVal[0];
          var evalue = '';
          if(keyVal.length>1){
              evalue = keyVal[1];
          }
          outPara[ekey] = evalue;
        }
      }

      if(value!==undefined){
        outPara[key] = value;
      }else{
        delete outPara[key];
      }
      parameters = [];
      for(var k in outPara){
        parameters.Push(k + '=' + outPara[k]);
      }

      var finalUrl = baseUrl;

      if(parameters.length>0){
        finalUrl += '?' + parameters.join('&'); 
      }

      return finalUrl + url.substring(hashIndex); 
  }
4
lingeshram

C’est ce que j’utilise quand il s’agit de quelques ajouts ou mises à jour de paramètres d’URL de base côté serveur, comme Node.js.

CoffeScript:

###
    @method addUrlParam Adds parameter to a given url. If the parameter already exists in the url is being replaced.
    @param {string} url
    @param {string} key Parameter's key
    @param {string} value Parameter's value
    @returns {string} new url containing the parameter
###
addUrlParam = (url, key, value) ->
    newParam = key+"="+value
    result = url.replace(new RegExp('(&|\\?)' + key + '=[^\&|#]*'), '$1' + newParam)
    if result is url
        result = if url.indexOf('?') != -1 then url.split('?')[0] + '?' + newParam + '&' + url.split('?')[1]
    else if url.indexOf('#') != -1 then url.split('#')[0] + '?' + newParam + '#' + url.split('#')[1]
    else url + '?' + newParam
    return result

JavaScript:

function addUrlParam(url, key, value) {
    var newParam = key+"="+value;
    var result = url.replace(new RegExp("(&|\\?)"+key+"=[^\&|#]*"), '$1' + newParam);
    if (result === url) { 
        result = (url.indexOf("?") != -1 ? url.split("?")[0]+"?"+newParam+"&"+url.split("?")[1] 
           : (url.indexOf("#") != -1 ? url.split("#")[0]+"?"+newParam+"#"+ url.split("#")[1] 
              : url+'?'+newParam));
    }
    return result;
}

var url = "http://www.example.com?foo=bar&ciao=3&Doom=5#hashme";
result1.innerHTML = addUrlParam(url, "ciao", "1");
<p id="result1"></p>
3
magiccrafter

C’était ma propre tentative, mais je vais utiliser la réponse de annakata car elle semble beaucoup plus propre:

function AddUrlParameter(sourceUrl, parameterName, parameterValue, replaceDuplicates)
{
    if ((sourceUrl == null) || (sourceUrl.length == 0)) sourceUrl = document.location.href;
    var urlParts = sourceUrl.split("?");
    var newQueryString = "";
    if (urlParts.length > 1)
    {
        var parameters = urlParts[1].split("&");
        for (var i=0; (i < parameters.length); i++)
        {
            var parameterParts = parameters[i].split("=");
            if (!(replaceDuplicates && parameterParts[0] == parameterName))
            {
                if (newQueryString == "")
                    newQueryString = "?";
                else
                    newQueryString += "&";
                newQueryString += parameterParts[0] + "=" + parameterParts[1];
            }
        }
    }
    if (newQueryString == "")
        newQueryString = "?";
    else
        newQueryString += "&";
    newQueryString += parameterName + "=" + parameterValue;

    return urlParts[0] + newQueryString;
}

De plus, j'ai trouvé ce plugin jQuery dans un autre article sur stackoverflow, et si vous avez besoin de plus de flexibilité, vous pouvez utiliser celui-ci: http://plugins.jquery.com/project/query-object

Je pense que le code serait (n'a pas été testé):

return $.query.parse(sourceUrl).set(parameterName, parameterValue).toString();
3
Lessan Vaezi

La solution la plus simple, fonctionne si vous avez déjà une balise ou non, et la supprime automatiquement afin d'éviter l'ajout de balises identiques, amusez-vous

function changeURL(tag)
{
if(window.location.href.indexOf("?") > -1) {
    if(window.location.href.indexOf("&"+tag) > -1){

        var url = window.location.href.replace("&"+tag,"")+"&"+tag;
    }
    else
    {
        var url = window.location.href+"&"+tag;
    }
}else{
    if(window.location.href.indexOf("?"+tag) > -1){

        var url = window.location.href.replace("?"+tag,"")+"?"+tag;
    }
    else
    {
        var url = window.location.href+"?"+tag;
    }
}
  window.location = url;
}

ENSUITE

changeURL("i=updated");
2
Kuza Grave

J'aime la réponse de Mehmet Fatih Yıldız même s'il n'a pas répondu à toute la question.

Dans la même ligne que sa réponse, j'utilise ce code:

"Cela ne contrôle pas l'existence du paramètre et ne change pas la valeur existante. Il ajoute votre paramètre à la fin"

  /** add a parameter at the end of the URL. Manage '?'/'&', but not the existing parameters.
   *  does escape the value (but not the key)
   */
  function addParameterToURL(_url,_key,_value){
      var param = _key+'='+escape(_value);

      var sep = '&';
      if (_url.indexOf('?') < 0) {
        sep = '?';
      } else {
        var lastChar=_url.slice(-1);
        if (lastChar == '&') sep='';
        if (lastChar == '?') sep='';
      }
      _url += sep + param;

      return _url;
  }

et le testeur:

  /*
  function addParameterToURL_TESTER_sub(_url,key,value){
    //log(_url);
    log(addParameterToURL(_url,key,value));
  }

  function addParameterToURL_TESTER(){
    log('-------------------');
    var _url ='www.google.com';
    addParameterToURL_TESTER_sub(_url,'key','value');
    addParameterToURL_TESTER_sub(_url,'key','Text Value');
    _url ='www.google.com?';
    addParameterToURL_TESTER_sub(_url,'key','value');
    _url ='www.google.com?A=B';
    addParameterToURL_TESTER_sub(_url,'key','value');
    _url ='www.google.com?A=B&';
    addParameterToURL_TESTER_sub(_url,'key','value');
    _url ='www.google.com?A=1&B=2';
    addParameterToURL_TESTER_sub(_url,'key','value');

  }//*/
2
Loda

J'irais avec this petite bibliothèque complète pour gérer les URL en js:

https://github.com/Mikhus/jsurl

2
Joao Leme
const urlParams = new URLSearchParams(window.location.search);

urlParams.set('order', 'date');

window.location.search = urlParams;

.set premier agrument est la clé, le second est la valeur.

2
Zoidbergseasharp

Si vous vous amusez avec des URL dans des liens ou ailleurs, vous devrez peut-être également prendre en compte le hachage. Voici une solution assez simple à comprendre. Probablement pas le LE PLUS RAPIDE car il utilise une expression régulière ... mais dans 99,999% des cas, la différence n'a pas d'importance!

function addQueryParam( url, key, val ){
    var parts = url.match(/([^?#]+)(\?[^#]*)?(\#.*)?/);
    var url = parts[1];
    var qs = parts[2] || '';
    var hash = parts[3] || '';

    if ( !qs ) {
        return url + '?' + key + '=' + encodeURIComponent( val ) + hash;
    } else {
        var qs_parts = qs.substr(1).split("&");
        var i;
        for (i=0;i<qs_parts.length;i++) {
            var qs_pair = qs_parts[i].split("=");
            if ( qs_pair[0] == key ){
                qs_parts[ i ] = key + '=' + encodeURIComponent( val );
                break;
            }
        }
        if ( i == qs_parts.length ){
            qs_parts.Push( key + '=' + encodeURIComponent( val ) );
        }
        return url + '?' + qs_parts.join('&') + hash;
    }
}
1
theozero

réponse de Vianney Bajart est correct; Cependant, URL ne fonctionnera que si vous avez l'URL complète avec le port, l'hôte, le chemin d'accès et la requête:

new URL('http://server/myapp.php?id=10&enabled=true')

Et RLSearchParams ne fonctionnera que si vous ne transmettez que la chaîne de requête:

new URLSearchParams('?id=10&enabled=true')

Si vous avez une URL incomplète ou relative et que vous vous moquez de l'URL de base, vous pouvez simplement diviser par ? pour obtenir la chaîne de requête et rejoindre plus tard de la manière suivante:

function setUrlParams(url, key, value) {
  url = url.split('?');
  usp = new URLSearchParams(url[1]);
  usp.set(key, value);
  url[1] = usp.toString();
  return url.join('?');
}

let url = 'myapp.php?id=10';
url = setUrlParams(url, 'enabled', true);  // url = 'myapp.php?id=10&enabled=true'
url = setUrlParams(url, 'id', 11);         // url = 'myapp.php?id=11&enabled=true'

Non compatible avec Internet Explorer.

1
iau

Ajout à la réponse de @ Vianney https://stackoverflow.com/a/44160941/6609678

Nous pouvons importer le module d'URL intégrée dans le noeud comme suit

const { URL } = require('url');

Exemple: 

Terminal $ node
> const { URL } = require('url');
undefined
> let url = new URL('', 'http://localhost:1989/v3/orders');
undefined
> url.href
'http://localhost:1989/v3/orders'
> let fetchAll=true, timePeriod = 30, b2b=false;
undefined
> url.href
'http://localhost:1989/v3/orders'
>  url.searchParams.append('fetchAll', fetchAll);
undefined
>  url.searchParams.append('timePeriod', timePeriod);
undefined
>  url.searchParams.append('b2b', b2b);
undefined
> url.href
'http://localhost:1989/v3/orders?fetchAll=true&timePeriod=30&b2b=false'
> url.toString()
'http://localhost:1989/v3/orders?fetchAll=true&timePeriod=30&b2b=false'

Liens utiles:

https://developer.mozilla.org/en-US/docs/Web/API/URLhttps://developer.mozilla.org/en/docs/Web/API/ URLSearchParams

1
Jinxer Albatross

Réinitialiser toute la chaîne de requête

var params = { params1:"val1", params2:"val2" };
let str = jQuery.param(params);

let uri = window.location.href.toString();
if (uri.indexOf("?") > 0)
   uri = uri.substring(0, uri.indexOf("?"));

console.log(uri+"?"+str);
//window.location.href = uri+"?"+str;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
0
Mahdi Bashirpour

Cela fonctionnera dans tous les navigateurs modernes.

function insertParam(key,value) {
      if (history.pushState) {
          var newurl = window.location.protocol + "//" + window.location.Host + window.location.pathname + '?' +key+'='+value;
          window.history.pushState({path:newurl},'',newurl);
      }
    }
0
Prasobh.Kollattu

La solution la plus simple à laquelle je puisse penser est cette méthode, qui renvoie l'URI modifié. J'ai l'impression que la plupart d'entre vous travaillent beaucoup trop fort.

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

Avec les nouvelles réalisations de JS, voici comment on peut ajouter un paramètre de requête à l’URL:

var protocol = window.location.protocol,
    Host = '//' + window.location.Host,
    path = window.location.pathname,
    query = window.location.search;

var newUrl = protocol + Host + path + query + (query ? '&' : '?') + 'param=1';

window.history.pushState({path:newUrl}, '' , newUrl);

Voir aussi cette possibilité Moziila URLSearchParams.append ()

0
Alliswell

Essayez
Les expressions régulières, si lentes, ainsi:

var SetParamUrl = function(_k, _v) {// replace and add new parameters

    let arrParams = window.location.search !== '' ? decodeURIComponent(window.location.search.substr(1)).split('&').map(_v => _v.split('=')) : Array();
    let index = arrParams.findIndex((_v) => _v[0] === _k); 
    index = index !== -1 ? index : arrParams.length;
    _v === null ? arrParams = arrParams.filter((_v, _i) => _i != index) : arrParams[index] = [_k, _v];
    let _search = encodeURIComponent(arrParams.map(_v => _v.join('=')).join('&'));

    let newurl = window.location.protocol + "//" + window.location.Host + window.location.pathname + (arrParams.length > 0 ? '?' +  _search : ''); 

    // window.location = newurl; //reload 

    if (history.pushState) { // without reload  
        window.history.pushState({path:newurl}, null, newurl);
    }

};

var GetParamUrl = function(_k) {// get parameter by key

    let sPageURL = decodeURIComponent(window.location.search.substr(1)),
        sURLVariables = sPageURL.split('&').map(_v => _v.split('='));
    let _result = sURLVariables.find(_v => _v[0] === _k);
    return _result[1];

};

Exemple:

        // https://some.com/some_path
        GetParamUrl('cat');//undefined
        SetParamUrl('cat', "strData");// https://some.com/some_path?cat=strData
        GetParamUrl('cat');//strData
        SetParamUrl('sotr', "strDataSort");// https://some.com/some_path?cat=strData&sotr=strDataSort
        GetParamUrl('sotr');//strDataSort
        SetParamUrl('cat', "strDataTwo");// https://some.com/some_path?cat=strDataTwo&sotr=strDataSort
        GetParamUrl('cat');//strDataTwo
        //remove param
        SetParamUrl('cat', null);// https://some.com/some_path?sotr=strDataSort
0
amiron

Autant que je sache, aucune des réponses ci-dessus ne permet de résoudre le cas où la chaîne de requête contient des paramètres qui sont eux-mêmes un tableau et par conséquent qui apparaîtront plusieurs fois, par exemple:

http://example.com?sizes[]=a&sizes[]=b

La fonction suivante est ce que j’ai écrit pour mettre à jour document.location.search. Il prend comme argument un tableau de tableaux de paires clé/valeur et retourne une version révisée de ce dernier avec laquelle vous pouvez faire ce que vous voulez. Je l'utilise comme ceci:

var newParams = [
    ['test','123'],
    ['best','456'],
    ['sizes[]','XXL']
];
var newUrl = document.location.pathname + insertParams(newParams);
history.replaceState('', '', newUrl);

Si l'URL actuelle était:

http://example.com/index.php?test=replaceme&sizes[]=XL

Cela t'aurait

http://example.com/index.php?test=123&sizes[]=XL&sizes[]=XXL&best=456

Fonction

function insertParams(params) {
    var result;
    var ii = params.length;
    var queryString = document.location.search.substr(1);
    var kvps = queryString ? queryString.split('&') : [];
    var kvp;
    var skipParams = [];
    var i = kvps.length;
    while (i--) {
        kvp = kvps[i].split('=');
        if (kvp[0].slice(-2) != '[]') {
            var ii = params.length;
            while (ii--) {
                if (params[ii][0] == kvp[0]) {
                    kvp[1] = params[ii][1];
                    kvps[i] = kvp.join('=');
                    skipParams.Push(ii);
                }
            }
        }
    }
    var ii = params.length;
    while (ii--) {
        if (skipParams.indexOf(ii) === -1) {
            kvps.Push(params[ii].join('='));
        }
    }
    result = kvps.length ? '?' + kvps.join('&') : '';
    return result;
}
0
billynoah

Ok ici je compare Deux fonctions, une faite par moi-même (regExp) et une autre faite par (annakata).

Tableau divisé:

function insertParam(key, value)
{
    key = escape(key); value = escape(value);

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

    var i=kvp.length; var x; while(i--) 
    {
        x = kvp[i].split('=');

        if (x[0]==key)
        {
                x[1] = value;
                kvp[i] = x.join('=');
                break;
        }
    }

    if(i<0) {kvp[kvp.length] = [key,value].join('=');}

    //this will reload the page, it's likely better to store this until finished
    return "&"+kvp.join('&'); 
}

Méthode regexp:

function addParameter(param, value)
{
    var regexp = new RegExp("(\\?|\\&)" + param + "\\=([^\\&]*)(\\&|$)");
    if (regexp.test(document.location.search)) 
        return (document.location.search.toString().replace(regexp, function(a, b, c, d)
        {
                return (b + param + "=" + value + d);
        }));
    else 
        return document.location.search+ param + "=" + value;
}

Cas de test:

time1=(new Date).getTime();
for (var i=0;i<10000;i++)
{
addParameter("test","test");
}
time2=(new Date).getTime();
for (var i=0;i<10000;i++)
{
insertParam("test","test");
}

time3=(new Date).getTime();

console.log((time2-time1)+" "+(time3-time2));

Il semble que même avec la solution la plus simple (lorsque l'expression rationnelle utilise uniquement test et n'entre pas dans la fonction .replace), elle est toujours plus lente que la division ... Eh bien. Regexp est un peu lent mais ... euh ...

0
Paweł Witkowski Photography