Ändra URL-parametrar och ange standardvärden med JavaScript

Jag har denna URL:

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

vad jag behöver är att kunna ändra värdet för url-parametern 'rows' till något jag specificerar, låt oss säga 10. Och om 'rows' inte finns, behöver jag lägga till det i slutet av url:en och lägga till det värde jag redan har specificerat (10).

Svar #1

Jag har utökat Sujoys kod för att skapa en funktion.

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

Funktionsanrop:

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

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

Uppdaterad version som också tar hand om ankare på URL:en.

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

Svar #2

Jag tror att du vill ha frågepluginet.

T.ex.:

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

Detta kommer att fungera oavsett det aktuella tillståndet hos raderna.

Svar #3

Ett modernt tillvägagångssätt för detta är att använda inbyggda standardbaserade URLSearchParams. Det stöds av alla större webbläsare, förutom IE där polyfills finns tillgängliga.

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.

Svar #4

För att besvara min egen fråga 4 år senare, efter att ha lärt mig mycket. Särskilt att du inte borde använda jQuery till allt. Jag har skapat en enkel modul som kan parsa/omvandla en frågesträng till en sträng. Detta gör det enkelt att ändra frågesträngen.

Du kan använda query-string på följande sätt:

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

Svar #5

Snabb liten lösning i ren JS, inga tillägg behövs:

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

Kalla det så här:

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

Eller, om du vill hålla dig på samma sida och ersätta flera parametrar:

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

redigera, tack Luke: För att ta bort parametern helt, ange false eller null för värdet: replaceQueryParam('rows', false, params). Eftersom 0 också är falskt, ange '0'.

Svar #6

Ben Alman har ett bra jquery querystring/url-plugin här som låter dig manipulera querystringen enkelt.

Som begärt -

Gå till hans testsida här

I Firebug, skriv följande i konsolen

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

Det kommer att returnera följande ändrade URL-sträng till dig

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

Observera att ett querystring-värde för a har ändrats från X till 3 och det har lagts till ett nytt värde.

Du kan sedan använda den nya URL-strängen hur du vill, t.ex. genom att använda document.location=newUrl eller ändra en ankarlänk osv.

Svar #7

Detta är det moderna sättet att ändra URL-parametrar:

function setGetParam(key,value) {
  if (history.pushState) {
    var params = new URLSearchParams(window.location.search);
    params.set(key, value);
    var newUrl = window.location.origin 
          + window.location.pathname 
          + '?' + params.toString();
    window.history.pushState({path:newUrl},'',newUrl);
  }
}

Svar #8

du kan göra det via vanlig JS också

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;

Svar #9

Använd URLSearchParams för att kontrollera, hämta och ange parametervärden i URL

Här är exemplet för att hämta den aktuella URL:en, ställa in nya parametrar och uppdatera URL:en eller ladda om sidan enligt dina behov

var rows = 5; // value that you want to set
var url = new URL(window.location);
(url.searchParams.has('rows') ? url.searchParams.set('rows', rows) : url.searchParams.append('rows', rows));

url.search = url.searchParams;
url        = url.toString();

// if you want to append into URL without reloading the page
history.pushState({}, null, url);

// want to reload the window with a new param
window.location = url;

Svar #10

2020-lösning: sätter variabeln eller tar bort den om du skickar null eller undefined som värde.

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

Svar #11

URL-frågeparametrar kan lätt ändras med hjälp av URLSearchParams och History-gränssnitt:

// Construct URLSearchParams object instance from current URL querystring.
var queryParams = new URLSearchParams(window.location.search);
 
// Set new or modify existing parameter value. 
//queryParams.set("myParam", "myValue");
queryParams.set("rows", "10");
 
// Replace current querystring with the new one.
history.replaceState(null, null, "?"+queryParams.toString());

Alternativt, istället för att modifiera nuvarande historikpost med replaceState(), kan vi använda pushState()-metoden för att skapa en ny:

history.pushState(null, null, "?"+queryParams.toString());

https://zgadzaj.com/development/javascript/how-to-change-url-query-parameter-with-javascript-only

Svar #12

Skulle ett gångbart alternativ till strängmanipulation vara att ställa upp ett html-formulär och bara ändra värdet på rows-elementet?

Så, med html som är något som

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

Med följande JavaScript för att skicka formuläret

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

Förmodligen inte lämpligt för alla situationer, men kan vara trevligare än att analysera URL-strängen.