wake-up-neo.com

Ändern Sie die URL-Parameter

Ich habe diese URL:

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

was ich brauche, ist in der Lage zu sein, den URL-Parameter "Zeilen" in etwas zu ändern, das ich spezifiziert habe, sagen wir 10 Wert, den ich bereits angegeben habe (10).

javascripturlquery-stringurl-parametersurl-parsing
161
Sindre Sorhus

Um meine eigene Frage 4 Jahre später zu beantworten, nachdem ich viel gelernt habe. Vor allem, dass Sie jQuery nicht für alles verwenden sollten. Ich habe ein einfaches Modul erstellt, das eine Abfragezeichenfolge analysieren/stringifizieren kann. Dies macht es leicht, die Abfragezeichenfolge zu ändern.

Sie können query-string wie folgt verwenden:

// 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);
58
Sindre Sorhus

Ich habe den Code von Sujoy um eine Funktion erweitert.

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

Funktionsaufrufe:

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

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

Aktualisierte Version, die auch die Anker der URL berücksichtigt. 

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;
}
94
Adil Malik

Ich denke, du willst das Query Plugin .

Z.B.:

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

Dies funktioniert unabhängig vom aktuellen Status der Zeilen.

88
Matthew Flaschen

Ben Alman hat ein gutes jquery Querystring/URL-Plugin hier , mit dem Sie den Querystring leicht manipulieren können.

Wie gewünscht -

Gehe zu seiner Testseite hier

In firebug geben Sie folgendes in die Konsole ein

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

Es wird die folgende geänderte URL-Zeichenfolge zurückgegeben

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

Beachten Sie, dass sich der Wert für einen Querystring für a von X auf 3 geändert hat und den neuen Wert hinzugefügt hat.

Sie können dann die neue URL - Zeichenfolge verwenden, wie Sie möchten, z

62
redsquare

Schnelle kleine Lösung in reinen js, keine Plugins erforderlich:

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

Nenne es so:

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

Oder, wenn Sie auf derselben Seite bleiben und mehrere Parameter ersetzen möchten:

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

bearbeiten, danke Luke: Um den Parameter vollständig zu entfernen, übergeben Sie false oder null als Wert: replaceQueryParam('rows', false, params). Da 0auch falsy ist, geben Sie '0' an.

52
bronson

sie können es auch über normale JS tun

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

Ein moderner Ansatz hierfür ist die Verwendung von nativen Standard-basierten URLSearchParams . Es wird von allen gängigen Browsern unterstützt, mit Ausnahme von IE, wo sie Polyfills available sind. 

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.
23
Alister Norris

Wäre es eine sinnvolle Alternative zur String-Manipulation, eine HTML-Variable form einzurichten und nur den Wert des rows-Elements zu ändern?

Mit html ist das also ungefähr so

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

Mit folgendem JavaScript das Formular absenden

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

Wahrscheinlich nicht für alle Situationen geeignet, könnte aber schöner sein, als die URL-Zeichenfolge zu analysieren.

9
Harry Lime

Sie können diese Bibliothek für diese Aufgabe verwenden: 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);
6
Mikhus

Ich habe eine kleine Hilfsfunktion geschrieben, die mit jedem select funktioniert. Alles, was Sie tun müssen, ist, die Klasse "redirectOnChange" zu einem select-Element hinzuzufügen. Dadurch wird die Seite mit einem neuen/geänderten Querystring-Parameter neu geladen, der der ID und dem Wert des select entspricht.

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

Das obige Beispiel würde "? MyValue = 222" oder "? MyValue = 333" hinzufügen (oder "&" verwenden, wenn andere Parameter vorhanden sind) und die Seite neu laden.

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);
    });
});
3
Paul Grimshaw

Dies ist der moderne Weg, es zu tun:

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

Hier habe ich die Antwort von Adil Malik genommen und die 3 Probleme behoben, die ich damit identifizierte.

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

Ich suchte das Gleiche und fand: https://github.com/medialize/URI.js das ist ganz nett :)

- Aktualisieren

Ich habe ein besseres Paket gefunden: https://www.npmjs.org/package/qs es befasst sich auch mit Arrays in get params.

0
Chris

Hier ist was ich mache. Mit meiner Funktion editParams () können Sie beliebige Parameter hinzufügen, entfernen oder ändern. Anschließend können Sie die eingebaute replaceState () - Funktion verwenden, um die URL zu aktualisieren:

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;
}
0
Bobb Fwed

Auch ich habe eine library geschrieben, um URL-Abfrageparameter in JavaScript abzurufen und einzustellen.

Hier ist ein Beispiel für ihre Verwendung.

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

Abfrageparameter als Objekt oder Schlüssel abrufen oder hinzufügen/ändern/entfernen.

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

Eine weitere Variante von Sujoys Antwort. Ich habe einfach die Variablennamen geändert und einen Namespace-Wrapper hinzugefügt:

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

Useage ist jetzt:

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

Meine Lösung:

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

Dann rufen Sie einfach "setParams" auf und übergeben ein Objekt mit den Daten, die Sie setzen möchten.

Beispiel:

$('select').on('change', e => {
    const $this = $(e.currentTarget)
    setParams({ $this.attr('name'): $this.val() })
})

In meinem Fall musste ich eine HTML-Select-Eingabe aktualisieren, wenn sich diese ändert und wenn der Wert "0" ist, den Parameter entfernen. Sie können die Funktion bearbeiten und den Parameter aus der URL entfernen, wenn der Objektschlüssel ebenfalls "null" ist.

Hoffe, das hilft dir

0
Benjamin