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).
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);
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;
}
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.
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.
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'.
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;
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.
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.
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);
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);
});
});
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);
}
}
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;
}
}
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.
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;
}
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
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");
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