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

Dank moderner Javascript, node.js und Browser-Unterstützung, können wir aus 3rd-Party-Bibliothek Strudel (jquery, query-string etc.) und DRY uns.

Hier sind javascript(node.js) und typescript Version für eine Funktion, die Abfrage-Parameter von gegebenen url hinzufügt oder aktualisiert:

Javascript

const getUriWithParam = (baseUrl, params) => {
  const Url = new URL(baseUrl);
  const urlParams = new URLSearchParams(Url.search);
  for (const key in params) {
    if (params[key] !== undefined) {
      urlParams.set(key, params[key]);
    }
  }
  Url.search = urlParams.toString();
  return Url.toString();
};

console.info('expected: https://example.com/?foo=bar');
console.log(getUriWithParam("https://example.com", {foo: "bar"}));

console.info('expected: https://example.com/slug?foo=bar#hash');
console.log(getUriWithParam("https://example.com/slug#hash", {foo: "bar"}));

console.info('expected: https://example.com/?bar=baz&foo=bar');
console.log(getUriWithParam("https://example.com?bar=baz", {foo: "bar"}));

console.info('expected: https://example.com/?foo=baz&bar=baz');
console.log(getUriWithParam("https://example.com?foo=bar&bar=baz", {foo: "baz"}));

Typoskript

const getUriWithParam = (
  baseUrl: string,
  params: Record<string, any>
): string => {
  const Url = new URL(baseUrl);
  const urlParams: URLSearchParams = new URLSearchParams(Url.search);
  for (const key in params) {
    if (params[key] !== undefined) {
      urlParams.set(key, params[key]);
    }
  }
  Url.search = urlParams.toString();
  return Url.toString();
};

Für React Native

URL ist in React Native nicht implementiert. Sie müssen also installieren react-native-url-polyfill im Vorfeld.

Für das Objekt params

Siehe die zweite Lösung in dieser Antwort

Answer 2

Hier ist meine Bibliothek, um das zu tun: https://github.com/Mikhus/jsurl

var u = new Url;
u.query.param='value'; // adds or replaces the param
alert(u)

Answer 3

Wenn er nicht gesetzt ist oder mit einem neuen Wert aktualisiert werden soll, können Sie verwenden:

window.location.search = 'param=value'; // or param=new_value

Dies geschieht übrigens in einfachem Javascript.

EDIT

Vielleicht möchten Sie versuchen, die jquery Abfrage-Objekt Plugin

window.location.search = jQuery.query.set("param", 5);

Answer 4

Ich weiß, dass diese Frage alt ist und schon zu Tode beantwortet wurde, aber hier ist mein Versuch. Ich versuche hier, das Rad neu zu erfinden, weil ich die derzeit akzeptierte Antwort verwendet habe und die falsche Handhabung von URL-Fragmenten mich kürzlich in einem Projekt gebissen hat.

Die Funktion ist unten aufgeführt. Sie ist ziemlich lang, aber sie wurde gemacht, um so widerstandsfähig wie möglich zu sein. Ich würde mich über Vorschläge zur Verkürzung/Verbesserung der Funktion freuen. Ich habe eine kleine jsFiddle-Testreihe für sie (oder andere ähnliche Funktionen). Wenn eine Funktion jeden dieser Tests bestehen kann, ist sie wahrscheinlich einsatzbereit.

Aktualisierung: Ich bin auf eine coole Funktion für Verwendung des DOM zum Parsen von URLs Deshalb habe ich diese Technik hier eingebaut. Sie macht die Funktion kürzer und zuverlässiger. Ein großes Lob an den Autor dieser Funktion.

/**
 * Add or update a query string parameter. If no URI is given, we use the current
 * window.location.href value for the URI.
 * 
 * Based on the DOM URL parser described here:
 * http://james.padolsey.com/javascript/parsing-urls-with-the-dom/
 *
 * @param   (string)    uri     Optional: The URI to add or update a parameter in
 * @param   (string)    key     The key to add or update
 * @param   (string)    value   The new value to set for key
 *
 * Tested on Chrome 34, Firefox 29, IE 7 and 11
 */
function update_query_string( uri, key, value ) {

    // Use window URL if no query string is provided
    if ( ! uri ) { uri = window.location.href; }

    // Create a dummy element to parse the URI with
    var a = document.createElement( 'a' ), 

        // match the key, optional square brackets, an equals sign or end of string, the optional value
        reg_ex = new RegExp( key + '((?:\\[[^\\]]*\\])?)(=|$)(.*)' ),

        // Setup some additional variables
        qs,
        qs_len,
        key_found = false;

    // Use the JS API to parse the URI 
    a.href = uri;

    // If the URI doesn't have a query string, add it and return
    if ( ! a.search ) {

        a.search = '?' + key + '=' + value;

        return a.href;
    }

    // Split the query string by ampersands
    qs = a.search.replace( /^\?/, '' ).split( /&(?:amp;)?/ );
    qs_len = qs.length; 

    // Loop through each query string part
    while ( qs_len > 0 ) {

        qs_len--;

        // Remove empty elements to prevent double ampersands
        if ( ! qs[qs_len] ) { qs.splice(qs_len, 1); continue; }

        // Check if the current part matches our key
        if ( reg_ex.test( qs[qs_len] ) ) {

            // Replace the current value
            qs[qs_len] = qs[qs_len].replace( reg_ex, key + '$1' ) + '=' + value;

            key_found = true;
        }
    }   

    // If we haven't replaced any occurrences above, add the new parameter and value
    if ( ! key_found ) { qs.push( key + '=' + value ); }

    // Set the new query string
    a.search = '?' + qs.join( '&' );

    return a.href;
}

Answer 5

Window.location.search ist lesend/schreibend.

Die Änderung der Abfragezeichenfolge führt jedoch zu einer Umleitung der Seite, auf der Sie sich gerade befinden, und zu einer Aktualisierung durch den Server.

Wenn Sie versuchen, den Zustand auf der Client-Seite beizubehalten (und ihn möglicherweise lesezeichenfähig zu machen), sollten Sie den URL-Hash anstelle des Query-Strings ändern, der Sie auf derselben Seite hält (window.location.hash ist lesbar/schreibbar). So machen es Websites wie twitter.com.

Sie werden auch wollen, dass die Schaltfläche "Zurück" zu arbeiten, müssen Sie Javascript-Ereignisse auf die Hash-Änderung Ereignis zu binden, ein gutes Plugin für das ist http://benalman.com/projects/jquery-hashchange-plugin/