Modifier les paramètres des URL et spécifier les valeurs par défaut en utilisant JavaScript

Question

J'ai cette URL :

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

Ce dont j'ai besoin est de pouvoir changer la valeur du paramètre url 'rows' en quelque chose que je spécifie, disons 10. Et si le paramètre 'rows' n'existe pas, je dois l'ajouter à la fin de l'url et ajouter la valeur que j'ai déjà spécifiée (10).

Answer 1

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

Answer 2

Je pense que vous voulez le plugin de requête .

Par exemple :

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

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

Answer 3

Pour répondre à ma propre question 4 ans plus tard, après avoir beaucoup appris. Notamment qu'il ne faut pas utiliser jQuery pour tout. J'ai créé un module simple qui peut parser/chiffrer une chaîne de requête. Cela permet de modifier facilement la chaîne de requête.

Vous pouvez utiliser requête-chaîne 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);

Answer 4

Ben Alman a un bon plugin jquery querystring/url aquí qui vous permet de manipuler facilement la chaîne de recherche.

Comme demandé -

Allez sur sa page de test aquí

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=3

Remarquez que la valeur de la chaîne d'interrogation pour a est passée de X à 3 et qu'elle a ajouté la nouvelle valeur.

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

Answer 5

Vous pouvez aussi le faire via le JS normal

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;