Modifica i parametri URL

Ho questo URL:

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

ciò di cui ho bisogno è poter cambiare il valore del parametro url ‘rows’ in qualcosa che specifichi, diciamo 10. E se le ‘righe’ non esistono, devo aggiungerlo alla fine dell’URL e aggiungere il valore che ho già specificato (10).

Penso che tu voglia il plugin di query .

Per esempio:

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

Funzionerà indipendentemente dallo stato corrente delle righe.

Ho esteso il codice di Sujoy per creare una funzione.

 /** * 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 

Versione aggiornata che si occupa anche delle ancore sull'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 

Ti verrà restituita la seguente stringa di url modificata

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

Si noti che un valore di querystring per a è cambiato da X a 3 e ha aggiunto il nuovo valore.

Puoi quindi utilizzare la nuova stringa url, ad ogni modo, ad es. Usando document.location = newUrl o modificando un link di ancoraggio, ecc

Per rispondere alla mia stessa domanda 4 anni dopo, dopo aver imparato molto. Soprattutto che non dovresti usare jQuery per tutto. Ho creato un modulo semplice in grado di analizzare / stringificare una stringa di query. Ciò semplifica la modifica della stringa di query.

È ansible utilizzare query-string come segue:

 // 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); 

Piccola soluzione rapida in js puro, nessun plugin necessario:

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

Chiamalo così:

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

Oppure, se vuoi rimanere sulla stessa pagina e sostituire più parametri:

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

edit, thanks Luca: Per rimuovere completamente il parametro, passa false o null per il valore: replaceQueryParam('rows', false, params) . Poiché 0 è anche falsi , specifica '0' .

puoi farlo anche tramite il normale JS

 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; 

Un approccio moderno a questo è utilizzare URLSearchParams basati sullo standard nativo. Per i browser meno recenti sono disponibili i polifragioli

 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. 

Un’alternativa valida alla manipolazione delle stringhe sarebbe quella di impostare un form html e solo modificare il valore dell’elemento rows ?

Quindi, con html è qualcosa di simile

 

Con il seguente JavaScript per inviare il modulo

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

Probabilmente non adatto a tutte le situazioni, ma potrebbe essere più bello dell’analisi della stringa dell’URL.

Puoi usare questa mia biblioteca per fare il lavoro: 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); 

Ho scritto una piccola funzione di aiuto che funziona con qualsiasi selezione. Tutto quello che devi fare è aggiungere la class “redirectOnChange” a qualsiasi elemento select, e questo farà ricaricare la pagina con un parametro querystring nuovo / modificato, uguale all’ID e al valore della select, ad esempio:

  

L’esempio sopra aggiungerebbe “? MyValue = 222” o “? MyValue = 333” (o usando “&” se esistono altri parametri), e ricaricherà la pagina.

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

Qui ho preso la risposta di Adil Malik e risolto i 3 problemi che ho identificato con esso.

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

Un’altra variazione sulla risposta di Sujoy. Ho appena cambiato i nomi delle variabili e aggiunto un wrapper namespace:

 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'uso è ora:

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

Anch’io ho scritto una libreria per ottenere e impostare parametri di query URL in JavaScript .

Ecco un esempio del suo utilizzo.

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

Ottieni parametri di query come object, per chiave o aggiungi / modifica / rimuovi.

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

Ecco cosa faccio. Usando la mia funzione editParams (), puoi aggiungere, rimuovere o modificare qualsiasi parametro, quindi utilizzare la funzione built in replaceState () per aggiornare 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; } 

Stavo cercando la stessa cosa e ho trovato: https://github.com/medialize/URI.js che è abbastanza carino 🙂

— Aggiornare

Ho trovato un pacchetto migliore: https://www.npmjs.org/package/qs si occupa anche di array in get parametri.

So che questa è una vecchia domanda. Ho migliorato la funzione sopra per aggiungere o aggiornare i parametri della query. Ancora una pura soluzione JS.

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

la mia funzione supporta la rimozione di param

 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(/\&$/, '')); } 

Questo è il modo moderno di farlo:

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

Il mio frammento con decodifica / codifica URI:

 function isDefined(object) { return object !== undefined && object !== null; } function isNotEmpty(string) { return isDefined(string) && string.length > 0; } /** * Update or add the specified URL parameter. * 

* @param {String} name * @param {String} value */ function updateUrlParam(name, value) { // Get the path and the query var urlInfo = decodeURI(window.location.href).split('?'); var path = urlInfo[0]; var query = urlInfo[1]; // Build the query var params = ''; var anchor = null; if (isNotEmpty(query)) { var queryInfo = query.split('#'); query = queryInfo[0]; anchor = queryInfo[1]; queryInfo = query.split('&'); for (var i = 0; i < queryInfo.length; ++i) { if (queryInfo[i].split('=')[0] !== name) { params += '&' + queryInfo[i]; } } } else { var queryInfo = path.split('#'); query = queryInfo[0]; anchor = queryInfo[1]; if (isNotEmpty(query)) { path = query; } } query = '?' + name + '=' + value + params; if (isNotEmpty(anchor)) { query += '#' + anchor; } // Replace the URL window.history.replaceState('', '', encodeURI(path + query)); }