web-dev-qa-db-fra.com

Changer les paramètres de l'URL

J'ai cette URL:

site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc

ce dont j'ai besoin, c'est de pouvoir changer la valeur param de l'url "rows" en une chose que je spécifie, disons 10. Et si les "lignes" n'existent pas, je dois les ajouter à la fin de l'URL et ajouter valeur que j'ai déjà spécifiée (10).

161
Sindre Sorhus

Pour répondre à ma propre question 4 ans plus tard, après avoir beaucoup appris. Surtout que vous ne devriez pas utiliser jQuery pour tout. J'ai créé un module simple qui peut analyser/stringifier une chaîne de requête. Cela facilite la modification de la chaîne de requête.

Vous pouvez utiliser query-string comme suit:

// parse the query string into an object
var q = queryString.parse(location.search);
// set the `row` property
q.rows = 10;
// convert the object to a query string
// and overwrite the existing query string
location.search = queryString.stringify(q);
58
Sindre Sorhus

J'ai étendu le code de Sujoy pour créer une fonction.

/**
 * http://stackoverflow.com/a/10997390/11236
 */
function updateURLParameter(url, param, paramVal){
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";
    if (additionalURL) {
        tempArray = additionalURL.split("&");
        for (var i=0; i<tempArray.length; i++){
            if(tempArray[i].split('=')[0] != param){
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }
    }

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}

Appels de fonction:

var newURL = updateURLParameter(window.location.href, 'locId', 'newLoc');
newURL = updateURLParameter(newURL, 'resId', 'newResId');

window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));

Version mise à jour qui prend également en charge les ancres sur l'URL. 

function updateURLParameter(url, param, paramVal)
{
    var TheAnchor = null;
    var newAdditionalURL = "";
    var tempArray = url.split("?");
    var baseURL = tempArray[0];
    var additionalURL = tempArray[1];
    var temp = "";

    if (additionalURL) 
    {
        var tmpAnchor = additionalURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor = tmpAnchor[1];
        if(TheAnchor)
            additionalURL = TheParams;

        tempArray = additionalURL.split("&");

        for (var i=0; i<tempArray.length; i++)
        {
            if(tempArray[i].split('=')[0] != param)
            {
                newAdditionalURL += temp + tempArray[i];
                temp = "&";
            }
        }        
    }
    else
    {
        var tmpAnchor = baseURL.split("#");
        var TheParams = tmpAnchor[0];
            TheAnchor  = tmpAnchor[1];

        if(TheParams)
            baseURL = TheParams;
    }

    if(TheAnchor)
        paramVal += "#" + TheAnchor;

    var rows_txt = temp + "" + param + "=" + paramVal;
    return baseURL + "?" + newAdditionalURL + rows_txt;
}
94
Adil Malik

Je pense que vous voulez le plugin query .

Par exemple.:

window.location.search = jQuery.query.set("rows", 10);

Cela fonctionnera quel que soit l'état actuel des lignes.

88
Matthew Flaschen

Ben Alman a un bon plugin jquery querystring/url ici qui vous permet de manipuler facilement la chaîne de requête.

Comme demandé -

Allez à sa page de test ici

Dans firebug, entrez ce qui suit dans la console

jQuery.param.querystring(window.location.href, 'a=3&newValue=100');

Il vous renverra la chaîne d'URL modifiée suivante

http://benalman.com/code/test/js-jquery-url-querystring.html?a=3&b=Y&c=Z&newValue=100#n=1&o=2&p=

Notez que la valeur d'une chaîne de requête pour a a été modifiée de X à 3 et que la nouvelle valeur a été ajoutée.

Vous pouvez ensuite utiliser la nouvelle chaîne d'URL comme bon vous semble, par exemple en utilisant document.location = newUrl ou en modifiant un lien d'ancrage, etc.

62
redsquare

Petite solution rapide en js pur, aucun plugin nécessaire:

function replaceQueryParam(param, newval, search) {
    var regex = new RegExp("([?;&])" + param + "[^&;]*[;&]?");
    var query = search.replace(regex, "$1").replace(/&$/, '');

    return (query.length > 2 ? query + "&" : "?") + (newval ? param + "=" + newval : '');
}

Appelez ça comme ça:

 window.location = '/mypage' + replaceQueryParam('rows', 55, window.location.search)

Ou, si vous voulez rester sur la même page et remplacer plusieurs paramètres:

 var str = window.location.search
 str = replaceQueryParam('rows', 55, str)
 str = replaceQueryParam('cols', 'no', str)
 window.location = window.location.pathname + str

edit, merci Luke: Pour supprimer entièrement le paramètre, transmettez false ou null à la valeur: replaceQueryParam('rows', false, params). Puisque 0est également faux , spécifiez '0'.

52
bronson

vous pouvez le faire via JS normal aussi

var url = document.URL
var newAdditionalURL = "";
var tempArray = url.split("?");
var baseURL = tempArray[0];
var aditionalURL = tempArray[1]; 
var temp = "";
if(aditionalURL)
{
var tempArray = aditionalURL.split("&");
for ( var i in tempArray ){
    if(tempArray[i].indexOf("rows") == -1){
            newAdditionalURL += temp+tempArray[i];
                temp = "&";
            }
        }
}
var rows_txt = temp+"rows=10";
var finalURL = baseURL+"?"+newAdditionalURL+rows_txt;
27
Posto

Une approche moderne consiste à utiliser la norme native - URLSearchParams . Il est supporté par tous les principaux navigateurs, sauf pour IE où ils sont polyfill available

const paramsString = "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc"
const searchParams = new URLSearchParams(paramsString);
searchParams.set('rows', 10);
console.log(searchParams.toString()); // return modified string.
23
Alister Norris

Une alternative viable à la manipulation de chaînes serait-elle de configurer un html form et de modifier simplement la valeur de l’élément rows?

Donc, avec html c'est quelque chose comme

<form id='myForm' target='site.fwx'>
    <input type='hidden' name='position' value='1'/>
    <input type='hidden' name='archiveid' value='5000'/>
    <input type='hidden' name='columns' value='5'/>
    <input type='hidden' name='rows' value='20'/>
    <input type='hidden' name='sorting' value='ModifiedTimeAsc'/>
</form>

Avec le JavaScript suivant pour soumettre le formulaire

var myForm = document.getElementById('myForm');
myForm.rows.value = yourNewValue;
myForm.submit();

Probablement pas adapté à toutes les situations, mais pourrait être plus agréable que d'analyser la chaîne d'URL.

9
Harry Lime

Vous pouvez utiliser cette bibliothèque pour faire le travail: https://github.com/Mikhus/jsurl

var url = new Url('site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc');
url.query.rows = 10;
alert( url);
6
Mikhus

J'ai écrit une petite fonction d'aide qui fonctionne avec n'importe quel select. Tout ce que vous avez à faire est d’ajouter la classe "redirectOnChange" à n’importe quel élément select. La page se rechargera avec un paramètre de chaîne de requête nouveau/modifié, égal à l’id et à la valeur de la sélection, par exemple:

<select id="myValue" class="redirectOnChange"> 
    <option value="222">test222</option>
    <option value="333">test333</option>
</select>

L'exemple ci-dessus ajouterait "? MyValue = 222" ou "? MyValue = 333" (ou utiliserait "&" s'il existe d'autres paramètres) et rechargerait la page.

jQuery:

$(document).ready(function () {

    //Redirect on Change
    $(".redirectOnChange").change(function () {
        var href = window.location.href.substring(0, window.location.href.indexOf('?'));
        var qs = window.location.href.substring(window.location.href.indexOf('?') + 1, window.location.href.length);
        var newParam = $(this).attr("id") + '=' + $(this).val();

        if (qs.indexOf($(this).attr("id") + '=') == -1) {
            if (qs == '') {
                qs = '?'
            }
            else {
                qs = qs + '&'
            }
            qs = qs + newParam;

        }
        else {
            var start = qs.indexOf($(this).attr("id") + "=");
            var end = qs.indexOf("&", start);
            if (end == -1) {
                end = qs.length;
            }
            var curParam = qs.substring(start, end);
            qs = qs.replace(curParam, newParam);
        }
        window.location.replace(href + '?' + qs);
    });
});
3
Paul Grimshaw

C'est la manière moderne de le faire:

function setGetParam(key,value) {
  if (history.pushState) {
    var params = new URLSearchParams(window.location.search);
    params.set(key, value);
    var newUrl = window.location.protocol + "//" + window.location.Host + window.location.pathname + '?' + params.toString();
    window.history.pushState({path:newUrl},'',newUrl);
  }
}
3
TjerkW

Ici, j'ai pris la réponse d'Adil Malik et résolu les 3 problèmes que j'avais identifiés avec elle.

/**
 * Adds or updates a URL parameter.
 *
 * @param {string} url  the URL to modify
 * @param {string} param  the name of the parameter
 * @param {string} paramVal  the new value for the parameter
 * @return {string}  the updated URL
 */
self.setParameter = function (url, param, paramVal){
  // http://stackoverflow.com/a/10997390/2391566
  var parts = url.split('?');
  var baseUrl = parts[0];
  var oldQueryString = parts[1];
  var newParameters = [];
  if (oldQueryString) {
    var oldParameters = oldQueryString.split('&');
    for (var i = 0; i < oldParameters.length; i++) {
      if(oldParameters[i].split('=')[0] != param) {
        newParameters.Push(oldParameters[i]);
      }
    }
  }
  if (paramVal !== '' && paramVal !== null && typeof paramVal !== 'undefined') {
    newParameters.Push(param + '=' + encodeURI(paramVal));
  }
  if (newParameters.length > 0) {
    return baseUrl + '?' + newParameters.join('&');
  } else {
    return baseUrl;
  }
}
2
Jonathan Aquino

Je cherchais la même chose et ai trouvé: https://github.com/medialize/URI.js qui est assez sympa :)

-- Mettre à jour

J'ai trouvé un meilleur package: https://www.npmjs.org/package/qs il traite également les tableaux dans get params.

0
Chris

Voici ce que je fais. À l'aide de ma fonction editParams (), vous pouvez ajouter, supprimer ou modifier tout paramètre, puis utiliser la fonction intégrée replaceState () pour mettre à jour l'URL:

window.history.replaceState('object or string', 'Title', 'page.html' + editParams('sorting', ModifiedTimeAsc));


// background functions below:

// add/change/remove URL parameter
// use a value of false to remove parameter
// returns a url-style string
function editParams (key, value) {
  key = encodeURI(key);

  var params = getSearchParameters();

  if (Object.keys(params).length === 0) {
    if (value !== false)
      return '?' + key + '=' + encodeURI(value);
    else
      return '';
  }

  if (value !== false)
    params[key] = encodeURI(value);
  else
    delete params[key];

  if (Object.keys(params).length === 0)
    return '';

  return '?' + $.map(params, function (value, key) {
    return key + '=' + value;
  }).join('&');
}

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

  for (var i = 0; i < prmarr.length; i++) {
    var tmparr = prmarr[i].split("=");
    params[tmparr[0]] = tmparr[1];
  }
  return params;
}
0
Bobb Fwed

J'ai moi aussi écrit une bibliothèque pour obtenir et définir des paramètres de requête d'URL en JavaScript .

Voici un exemple de son utilisation.

var url = Qurl.create()
  , query
  , foo
  ;

Obtenez les paramètres de la requête sous forme d'objet, par clé, ou ajoutez/modifiez/supprimez.

// returns { foo: 'bar', baz: 'qux' } for ?foo=bar&baz=qux
query = url.query();

// get the current value of foo
foo = url.query('foo');

// set ?foo=bar&baz=qux
url.query('foo', 'bar');
url.query('baz', 'qux');

// unset foo, leaving ?baz=qux
url.query('foo', false); // unsets foo
0
rb-

Une autre variation de la réponse de Sujoy. Vient de changer les noms de variables et d'ajouter un wrapper d'espace de noms

window.MyNamespace = window.MyNamespace  || {};
window.MyNamespace.Uri = window.MyNamespace.Uri || {};

(function (ns) {

    ns.SetQueryStringParameter = function(url, parameterName, parameterValue) {

        var otherQueryStringParameters = "";

        var urlParts = url.split("?");

        var baseUrl = urlParts[0];
        var queryString = urlParts[1];

        var itemSeparator = "";
        if (queryString) {

            var queryStringParts = queryString.split("&");

            for (var i = 0; i < queryStringParts.length; i++){

                if(queryStringParts[i].split('=')[0] != parameterName){

                    otherQueryStringParameters += itemSeparator + queryStringParts[i];
                    itemSeparator = "&";
                }
            }
        }

        var newQueryStringParameter = itemSeparator + parameterName + "=" + parameterValue;

        return baseUrl + "?" + otherQueryStringParameters + newQueryStringParameter;
    };

})(window.MyNamespace.Uri);

L'utilisation est maintenant:

var changedUrl = MyNamespace.Uri.SetQueryStringParameter(originalUrl, "CarType", "Ford");
0
Appetere

Ma solution:

const setParams = (data) => {
    if (typeof data !== 'undefined' && typeof data !== 'object') {
        return
    }

    let url = new URL(window.location.href)
    const params = new URLSearchParams(url.search)

    for (const key of Object.keys(data)) {
        if (data[key] == 0) {
            params.delete(key)
        } else {
            params.set(key, data[key])
        }
    }

    url.search = params
    url = url.toString()
    window.history.replaceState({ url: url }, null, url)
}

Ensuite, appelez simplement "setParams" et transmettez un objet avec les données que vous souhaitez définir.

Exemple:

$('select').on('change', e => {
    const $this = $(e.currentTarget)
    setParams({ $this.attr('name'): $this.val() })
})

Dans mon cas, j'ai dû mettre à jour une entrée de sélection html quand elle change et si la valeur est "0", supprimez le paramètre. Vous pouvez modifier la fonction et supprimer le paramètre de l'URL si la clé d'objet est également "null".

J'espère que cela vous aide

0
Benjamin