javascript - data - Modifica i parametri URL




windows document javascript (11)

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

https://code.i-harness.com


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 oggetto, 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

Ben Alman ha un buon plugin jquery querystring / url che ti permette di manipolare facilmente la querystring.

Come richiesto -

Vai alla sua pagina di test here

In firebug, inserisci quanto segue nella console

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

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


Ho esteso il codice di Sujoy per creare una funzione.

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

Chiamate di funzione:

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

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

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

Ho scritto una piccola funzione di aiuto che funziona con qualsiasi selezione. Tutto quello che devi fare è aggiungere la classe "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:

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

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

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.

È possibile 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' .


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://.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;
  }
}

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

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

const paramsString = "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc"
const searchParams = new URLSearchParams(paramsString);
searchParams.set('rows', 10);

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

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

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




url-parsing