Modifier les paramètres d'URL

189

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 du paramètre d'url «lignes» en quelque chose que je spécifie, disons 10. Et si les «lignes» n'existent pas, je dois l'ajouter à la fin de l'url et ajouter le valeur que j'ai déjà spécifiée (10).

Sindre Sorhus
la source
2
Une réponse légère et sans plugin: stackoverflow.com/a/10997390/11236
ripper234
11
Je ne peux pas croire que nous sommes en 2013 et qu'il n'y a pas de meilleure façon de le faire, comme quelque chose intégré dans les bibliothèques de navigateur de base.
Tyler Collier du
Voir ma réponse pour une solution moderne: stackoverflow.com/a/19965480/64949
Sindre Sorhus
6
@TylerCollier mi-2015 maintenant et toujours rien :(
Tejas Manohar
3
On dirait que nous y arrivons ... developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/…
chris

Réponses:

111

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;
}
Adil Malik
la source
Je n'arrive pas à faire fonctionner ça. Voici mon code: jsfiddle.net/Draven/tTPYL/1 L'URL ressemblerait http://www.domain.com/index.php?action=my_action&view-all=Yeset je dois changer la valeur "voir tout". Ma question SO qui a été fermée: stackoverflow.com/questions/13025880/…
Draven
Êtes-vous sûr? cela a fonctionné pour moi facilement. Découvrez-le ici: jsfiddle.net/mw49a
Adil Malik
1
Utilisez "var i = 0" au lieu de "i = 0" pour éviter de créer / modifier i en tant que variable globale.
Jonathan Aquino
1
Quelques autres problèmes avec cette fonction: (1) paramVal n'est pas encodé en uri. (2) si paramVal est nul, alors vous obtenez foo = null. Cela devrait être foo = (ou mieux encore, supprimez complètement foo).
Jonathan Aquino
Cela m'a rendu la vie tellement plus facile. Merci beaucoup mon pote!
boydenhartog
97

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 lignes.

Matthew Flaschen
la source
Mofle, c'est parce que le plugin Query utilise decodeURIComponent, et decodeURIComponent ("% F8") n'est pas valide.
Matthew Flaschen
2
Obtenez ces trucs bizarres de votre URL. Ou, en d'autres termes, "modifiez votre chaîne de requête pour n'utiliser que des caractères UTF-8 valides". :) F8 seul n'est pas un caractère UTF-8 valide.
Matthew Flaschen
Existe-t-il un moyen de récupérer l'URL de base de ce plugin? Par exemple, si mon URL est " youtube.com/watch?v=PZootaxRh3M ", récupérez " youtube.com/watch "
Matt Norris
3
@Wraith, vous n'avez pas besoin d'un plugin pour cela. C'est juste window.location.pathname.
Matthew Flaschen
2
@MattNorris Vous n'avez pas besoin d'un plugin pour cela, mais la bonne réponse est: window.location.host + window.location.pathname Dans votre cas, ce sera "www.youtube.com/watch"
nktssh
68

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 la chaîne de requête 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);
Sindre Sorhus
la source
1
Wow, c'est une solution brillamment simple. Je vous remercie!
jetlej
Cela fonctionne comme un champion! Merci Sindre 🏆🏆🏆 (tout ce que vous avez à faire est de minifier "query-string / index.js" et de le coller en bas de votre js)
Ronnie Royston
1
Avoir une bibliothèque supplémentaire juste pour cela semble être un peu plus ...
The Godfather
jQuery était trop pour 1 fonction, vous avez donc utilisé à la place du typecript, travis et plusieurs autres dépendances non-dev :)
Justin Meiners
@JustinMeiners Veuillez ne pas commenter si vous n'avez rien d'utile à contribuer à la conversation. TypeScript n'est pas utilisé par ce projet. Travis est un CI, pas une dépendance.
Sindre Sorhus le
64

Petite solution rapide en pure js, pas de plugins nécessaires:

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 souhaitez 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

modifier, merci Luc: Pour supprimer le paramètre tout à fait , passer falseou nullpour la valeur: replaceQueryParam('rows', false, params). Puisque 0 est également faux , spécifiez '0'.

Bronson
la source
2
également pour supprimer un paramètre utilisé de la sortie, procédez comme suit: str = replaceQueryParam ('oldparam', false, str) - mettez essentiellement une valeur de type false
Luke Wenke
1
a un problème, duplication de mon paramètre sans bonne raison, consultez cette solution similaire stackoverflow.com/a/20420424/3160597
azerafati
@Bludream, ce code fonctionne en production depuis des années. Je ne l'ai pas encore vu dupliquer un paramètre. Pouvez-vous publier une repro ou des informations plus constructives?
bronson
@Bludream Je comprends maintenant, c'est le script auquel vous avez lié qui ajoutait des paramètres en double. :)
bronson
1
@dVyper correct, une valeur erronée supprime entièrement le paramètre. Utilisez le texte «0» au lieu de l'entier 0.
bronson
62

Ben Alman a un bon jquery plug - in querystring / url ici qui vous permet de manipuler facilement le querystring.

Comme demandé -

Accédez à 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=3

Notez que la valeur de chaîne de requête a pour a est passée de X à 3 et a ajouté la nouvelle valeur.

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

carré rouge
la source
4
N'est-ce pas jQuery.param.querystring au lieu de jQuery.queryString?
Petr Peller
12
TypeError: jQuery.param.querystring is not a function
TMS
1
Pour avoir 'TypeError', il devrait être: jQuery.queryString (window.location.href, 'a = 3 & newValue = 100')
code-gijoe
2
vous devriez appeler jQuery.param.querystring. Je suppose qu'ils ont remanié la bibliothèque.
Will Wu
Aucune de ces fonctions n'existe plus. Vous souhaitez mettre à jour window.location.search manuellement. Cela devient plus difficile si vous ne voulez pas que la page soit repeinte, car cela entraînera un changement de page.
monokrome
39

Une approche moderne consiste à utiliser des URLSearchParams basés sur la norme native . Il est pris en charge par tous les principaux navigateurs, sauf pour IE où ils sont polyfills disponibles

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.
Alister
la source
1
Ce serait vraiment bien ... mais ce n'est pas le cas car IE ne le supporte pas du tout, et l'utilisation de polyfills pour une si petite chose est totalement hors de question.
forsberg
1
ceci aussi urlencode la chaîne de paramètres d'origine dans son intégralité, donc le résultat ressemble à site.fwx%3Fposition=1&archiveid=5000&columns=5&rows=10&sorting=ModifiedTimeAscce qui est déroutant car ce n'est pas ce que vous auriez construit si vous l'aviez fait manuellement ...
Ben Wheeler
1
Ce serait bien de voir un exemple de son utilisation. Je veux dire, comment obtenir la chaîne de paramètres de la page actuelle et comment la définir par la suite
The Godfather
27

vous pouvez également le faire via 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;
Posto
la source
Agréable! J'ai pris cela et modifié en une fonction. Vous envoyez l'url actuelle, le nom du paramètre que vous recherchez, la nouvelle valeur et un booléen indiquant si vous souhaitez ajouter le paramètre à la chaîne de requête si je ne le trouve pas actuellement. La fonction renvoie l'URL modifiée.
Gromer
Gormer, vous devez partager cette fonction avec d'autres :)
Adil Malik
Extrait génial. Moi aussi, je l'ai transformé en une fonction pour mon propre cas d'utilisation. Merci d'avoir partagé! +1
robabby
19

Voici la manière moderne de modifier les paramètres d'URL:

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);
  }
}
TjerkW
la source
2
Cette solution n'est actuellement pas prise en charge dans Internet Explorer 11: caniuse.com/#search=URLSearchParams
WoIIe
La même réponse a été répondu un an et demi avant vous par @Alister
FantomX1
10

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

Donc, avec htmlça, 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();

Ne convient probablement pas à toutes les situations, mais pourrait être plus agréable que l'analyse de la chaîne d'URL.

Harry Lime
la source
C'est une question intelligente.
icarito
7

Vous pouvez utiliser ma 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);
Mikhus
la source
4

Solution 2020 : définit la variable ou la supprime si vous passez nullou undefinedà la valeur.

var setSearchParam = function(key, value) {
    if (!window.history.pushState) {
        return;
    }

    if (!key) {
        return;
    }

    var url = new URL(window.location.href);
    var params = new window.URLSearchParams(window.location.search);
    if (value === undefined || value === null) {
        params.delete(key);
    } else {
        params.set(key, value);
    }

    url.search = params;
    url = url.toString();
    window.history.replaceState({url: url}, null, url);
}
Alper Ebicoglu
la source
Notez que URLSearchParamscela ne fonctionne pas dans les dernières versions de tous les principaux navigateurs (2020)
Oliver Schimmer
Il est pris en charge dans tous les principaux navigateurs sauf IE11: caniuse.com/#search=URLSearchParams
Luis Paulo Lohmann
Même si cela a commencé à être pris en charge, la même réponse avec URLSearchParams a reçu une réponse au moins 3 fois dans cette question déjà le 15 janvier 17 à 15:24, le 14 juin 18 à 15:54 et le 1 mars 19 à 12:46, comme si personne d'entre vous ne lisait les réponses avant de publier
FantomX1
tous les messages ont des problèmes mineurs qui doivent être résolus. alors laissez les utilisateurs voter et choisir le meilleur.
Alper Ebicoglu
3

J'ai écrit une petite fonction d'aide qui fonctionne avec n'importe quelle sélection. Tout ce que vous avez à faire est d'ajouter la classe "redirectOnChange" à n'importe quel élément de sélection, et cela entraînera le rechargement de la page 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 en utilisant "&" si d'autres paramètres existent), 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);
    });
});
Paul Grimshaw
la source
De loin la meilleure solution sur cette page
ed209
2

Ici, j'ai pris la réponse d'Adil Malik et corrigé les 3 problèmes que j'y ai identifiés.

/**
 * 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;
  }
}
Jonathan Aquino
la source
1

Voici ce que je fais. En utilisant ma fonction editParams (), vous pouvez ajouter, supprimer ou modifier n'importe quel 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;
}
Bobb Fwed
la source
Un vote négatif sans commentaire? Quel est le problème avec le code? Cela fonctionne à merveille dans de nombreuses situations.
Bobb Fwed
1

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 passez 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 lorsqu'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 aidera

Benjamin
la source
il y a déjà 2 réponses identiques avec URLSearchParams devant vous, comme si personne d'entre vous ne lisait vraiment les réponses. Publié le 15 janvier 17 à 15:24, 14 juin 18 18 à 15:54
FantomX1
0

Une autre variation de la réponse de Sujoy. Juste changé les noms de variables et ajouté 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'usage est maintenant:

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

J'ai moi aussi écrit une bibliothèque pour obtenir et définir les 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 requête en tant qu'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
rb-
la source
-1

Je sais que c'est une vieille question. J'ai amélioré la fonction ci-dessus pour ajouter ou mettre à jour les paramètres de requête. Encore une solution JS pure uniquement.

                      function addOrUpdateQueryParam(param, newval, search) {

                        var questionIndex = search.indexOf('?');

                        if (questionIndex < 0) {
                            search = search + '?';
                            search = search + param + '=' + newval;
                            return search;
                        }

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

                        var indexOfEquals = query.indexOf('=');

                        return (indexOfEquals >= 0 ? query + '&' : query + '') + (newval ? param + '=' + newval : '');
                    }
user3799810
la source
-1

ma fonction prend en charge la suppression des paramètres

function updateURLParameter(url, param, paramVal, remove = false) {
        var newAdditionalURL = '';
        var tempArray = url.split('?');
        var baseURL = tempArray[0];
        var additionalURL = tempArray[1];
        var rows_txt = '';

        if (additionalURL)
            newAdditionalURL = decodeURI(additionalURL) + '&';

        if (remove)
            newAdditionalURL = newAdditionalURL.replace(param + '=' + paramVal, '');
        else
            rows_txt = param + '=' + paramVal;

        window.history.replaceState('', '', (baseURL + "?" + newAdditionalURL + rows_txt).replace('?&', '?').replace('&&', '&').replace(/\&$/, ''));
    }
avec perte11
la source
-1

Je viens d'écrire un module simple pour gérer la lecture et la mise à jour des paramètres de requête d'url actuels.

Exemple d'utilisation:

import UrlParams from './UrlParams'

UrlParams.remove('foo') //removes all occurences of foo=?
UrlParams.set('foo', 'bar') //set all occurences of foo equal to bar
UrlParams.add('foo', 'bar2') //add bar2 to foo result: foo=bar&foo=bar2
UrlParams.get('foo') //returns bar
UrlParams.get('foo', true) //returns [bar, bar2]

Voici mon code nommé UrlParams. (Js / ts):

class UrlParams {

    /**
     * Get params from current url
     * 
     * @returns URLSearchParams
     */
    static getParams(){
        let url = new URL(window.location.href)
        return new URLSearchParams(url.search.slice(1))
    }

    /**
     * Update current url with params
     * 
     * @param params URLSearchParams
     */
    static update(params){
        if(`${params}`){
            window.history.replaceState({}, '', `${location.pathname}?${params}`)
        } else {
            window.history.replaceState({}, '', `${location.pathname}`)
        }
    }

    /**
     * Remove key from url query
     * 
     * @param param string
     */
    static remove(param){
        let params = this.getParams()
        if(params.has(param)){
            params.delete(param)
            this.update(params)
        }
    }

    /**
     * Add key value pair to current url
     * 
     * @param key string
     * @param value string
     */
    static add(key, value){
        let params = this.getParams()
        params.append(key, value)
        this.update(params)
    }

    /**
     * Get value or values of key
     * 
     * @param param string
     * @param all string | string[]
     */
    static get(param, all=false){
        let params = this.getParams()
        if(all){
            return params.getAll(param)
        }
        return params.get(param)
    }

    /**
     * Set value of query param
     * 
     * @param key string
     * @param value string
     */
    static set(key, value){
        let params = this.getParams()
        params.set(key, value)
        this.update(params)
    }

}
export default UrlParams
export { UrlParams }
Dieter Gribnitz
la source
Il y a déjà 4 mêmes réponses que celles que vous avez mentionnées publiées, répondu le 15 janvier 17 à 15:24, répondu le 14 juin 18 à 15:54, répondu le 1 mars 19 à 12:46 et répondu le 14 juin 19 à 7: 20, comme si personne ne lisait vraiment les réponses avant de poster
FantomX1
-2
     // usage: clear ; cd src/js/node/js-unit-tests/01-set-url-param ; npm test ; cd -
     // prereqs: , nodejs , mocha
     // URI = scheme:[//authority]path[?paramName1=paramValue1&paramName2=paramValue2][#fragment]
     // call by: uri = uri.setUriParam("as","md")
     String.prototype.setUriParam = function (paramName, paramValue) {
        var uri = this
        var fragment = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
        uri = ( uri.indexOf('#') === -1 ) ? uri : uri.split('#')[0]
        if ( uri.indexOf("?") === -1 ) { uri = uri + '?&' }
        uri = uri.replace ( '?' + paramName , '?&' + paramName)
        var toRepl = (paramValue != null) ? ('$1' + paramValue) : ''
        var toSrch = new RegExp('([&]' + paramName + '=)(([^&#]*)?)')
        uri = uri.replace(toSrch,toRepl)
        if (uri.indexOf(paramName + '=') === -1 && toRepl != '' ) {
           var ampersandMayBe = uri.endsWith('&') ? '' : '&'
           uri = uri + ampersandMayBe + paramName + "=" + String(paramValue)
        }
        uri = ( fragment.length == 0 ) ? uri : (uri+"#"+fragment) //may-be re-add the fragment
        return uri
     }

     var assert = require('assert');
     describe('replacing url param value', function () {

        // scheme://authority/path[?p1=v1&p2=v2#fragment
        // a clean url
        it('http://org.com/path -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with num value
        it('http://org.com/path?prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=57'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? but string value
        it('http://org.com/path?prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=boo-bar'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=boo-bar-baz'
           var uriActual = uri.setUriParam("bid","boo-bar-baz")
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& but string value
        it('http://org.com/path?&prm=src_v -> http://org.com/path?&prm=tgt_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with other param
        it('http://org.com/path?prm=src_v&other_p=other_v -> http://org.com/path?&prm=tgt_v&other_p=other_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p=other_v'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& with other param
        it('http://org.com/path?&prm=src_v&other_p=other_v -> http://org.com/path?&prm=tgt_v&other_p=other_v', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p&other_v'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p&other_v'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ? with other param with fragment
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // has the url param existing after the ?& with other param with fragment
        it('http://org.com/path?&prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p&other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=10&other_p&other_v#f'
           var uriActual = uri.setUriParam("bid",10)
           assert.equal(uriActual, uriExpected);
        });

        // remove the param-name , param-value pair
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",null)
           assert.equal(uriActual, uriExpected);
        });

        // remove the param-name , param-value pair
        it('http://org.com/path?&prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&bid=5&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriActual = uri.setUriParam("bid",null)
           assert.equal(uriActual, uriExpected);
        });

        // add a new param name , param value pair
        it('http://org.com/path?prm=src_v&other_p=other_v#f -> http://org.com/path?&prm=tgt_v&other_p=other_v#f', function (){
           var uri = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v#f'
           var uriExpected = 'http://site.eu:80/qto/view/devops_guide_doc?&other_p=other_v&bid=foo-bar#f'
           var uriActual = uri.setUriParam("bid","foo-bar")
           assert.equal(uriActual, uriExpected);
        });

     });
Yordan Georgiev
la source