Wie kann ich einen Abfrage-String-Parameter hinzufügen oder aktualisieren?

Question

Wie kann ich mit Javascript einen Query-String-Parameter zur URL hinzufügen, wenn er nicht vorhanden ist, oder wenn er vorhanden ist, den aktuellen Wert aktualisieren? Ich bin mit Jquery für meine Client-Seite Entwicklung.

Answer 1

Ein anderer Ansatz ohne Verwendung regulärer Ausdrücke . Unterstützt "Raute"-Anker am Ende der URL sowie mehrere Fragezeichen (?). Sollte etwas schneller sein als der Ansatz mit regulären Ausdrücken.

function setUrlParameter(url, key, value) {
  var parts = url.split("#", 2), anchor = parts.length > 1 ? "#" + parts[1] : '';
  var query = (url = parts[0]).split("?", 2);
  if (query.length === 1) 
    return url + "?" + key + "=" + value + anchor;

  for (var params = query[query.length - 1].split("&"), i = 0; i < params.length; i++)
    if (params[i].toLowerCase().startsWith(key.toLowerCase() + "="))
      return params[i] = key + "=" + value, query[query.length - 1] = params.join("&"), query.join("?") + anchor;

  return url + "&" + key + "=" + value + anchor
}

Answer 2

Verwenden Sie diese Funktion zum Hinzufügen, Entfernen und Ändern von Query-String-Parametern von URL auf der Grundlage von Jquery

/**
@param String url
@param object param {key: value} query parameter
*/
function modifyURLQuery(url, param){
    var value = {};

    var query = String(url).split('?');

    if (query[1]) {
        var part = query[1].split('&');

        for (i = 0; i < part.length; i++) {
            var data = part[i].split('=');

            if (data[0] && data[1]) {
                value[data[0]] = data[1];
            }
        }
    }

    value = $.extend(value, param);

    // Remove empty value
    for (i in value){
        if(!value[i]){
            delete value[i];
        }
    }

    // Return url with modified parameter
    if(value){
        return query[0] + '?' + $.param(value);
    } else {
        return query[0];
    }
}

Hinzufügen neuer und Ändern bestehender Parameter zu url

var new_url = modifyURLQuery("http://google.com?foo=34", {foo: 50, bar: 45});
// Result: http://google.com?foo=50&bar=45

Vorhandenes entfernen

var new_url = modifyURLQuery("http://google.com?foo=50&bar=45", {bar: null});
// Result: http://google.com?foo=50

Answer 3

Ich wollte etwas, das:

• Verwendet die browsereigene URL-API
• Kann hinzufügen, aktualisieren, abrufen oder löschen

• Erwartet den Abfrage-String nach dem Hash, z. B. für einseitige Anwendungen

  function queryParam(options = {}) {

  var defaults = { method: 'set', url: window.location.href, key: undefined, value: undefined, }

  for (var prop in defaults) { options[prop] = typeof options[prop] !== 'undefined' ? options[prop] : defaults[prop] }

  const existing = (options.url.lastIndexOf('?') > options.url.lastIndexOf('#')) ? options.url.substr(options.url.lastIndexOf('?') + 1) : ''

  const query = new URLSearchParams(existing)

  if (options.method === 'set') { query.set(options.key, options.value)

  return `${options.url.replace(`?${existing}`, '')}?${query.toString()}`

  } else if (options.method === 'get') { const val = query.get(options.key) let result = val === null ? val : val.toString()

  return result

  } else if (options.method === 'delete') { query.delete(options.key)

  let result = `${options.url.replace(`?${existing}`, '')}?${query.toString()}`
  const lastChar = result.charAt(result.length - 1)
  
  if (lastChar === '?') {
    result = `${options.url.replace(`?${existing}`, '')}`
  }
  
  return result

  } }

  // Usage: let url = 'https://example.com/sandbox/#page/'

  url = queryParam({ url, method: 'set', key: 'my-first-param', value: 'me' }) console.log(url)

  url = queryParam({ url, method: 'set', key: 'my-second-param', value: 'you' }) console.log(url)

  url = queryParam({ url, method: 'set', key: 'my-second-param', value: 'whomever' }) console.log(url)

  url = queryParam({ url, method: 'delete', key: 'my-first-param' }) console.log(url)

  const mySecondParam = queryParam({ url, method: 'get', key: 'my-second-param', }) console.log(mySecondParam)

  url = queryParam({ url, method: 'delete', key: 'my-second-param' }) console.log(url)

Answer 4

Durch die Verwendung von jQuery können wir wie folgt vorgehen

var query_object = $.query_string;
query_object["KEY"] = "VALUE";
var new_url = window.location.pathname + '?'+$.param(query_object)

In variablen new_url werden wir neue Abfrageparameter haben.

Referenz: http://api.jquery.com/jquery.param/

Answer 5

Dies sollte den Zweck erfüllen:

function updateQueryString(url, key, value) {
    var arr =  url.split("#");
    var url = arr[0];
    var fragmentId = arr[1];
    var updatedQS = "";
    if (url.indexOf("?") == -1) {
        updatedQS = encodeURIComponent(key) + "=" + encodeURIComponent(value);
    }
    else {
        updatedQS = addOrModifyQS(url.substring(url.indexOf("?") + 1), key, value); 
    }
    url = url.substring(0, url.indexOf("?")) + "?" + updatedQS;
    if (typeof fragmentId !== 'undefined') {
        url = url + "#" + fragmentId;
    }
    return url;
}

function addOrModifyQS(queryStrings, key, value) {
    var oldQueryStrings = queryStrings.split("&");
    var newQueryStrings = new Array();
    var isNewKey = true;
    for (var i in oldQueryStrings) {
        var currItem = oldQueryStrings[i];
        var searchKey = key + "=";
        if (currItem.indexOf(searchKey) != -1) {
            currItem = encodeURIComponent(key) + "=" + encodeURIComponent(value);
            isNewKey = false;
        }
        newQueryStrings.push(currItem);
    }
    if (isNewKey) {
        newQueryStrings.push(encodeURIComponent(key) + "=" + encodeURIComponent(value));
    }
    return newQueryStrings.join("&");
}