Wie kann ich URL-Parameter mit JavaScript manipulieren und ändern?

URL-Parameter ändern und Standardeinstellungen mit JavaScript festlegen

Da dynamisch generierte URLs immer häufiger vorkommen, ist es von entscheidender Bedeutung, über die Flexibilität zu verfügen, URL-Parameter zu manipulieren effizient. In diesem Artikel erfahren Sie, wie Sie mithilfe von JavaScript Parameter ändern und zu einer URL hinzufügen.

Ändern von Parameterwerten

Angenommen, Sie haben eine URL, die dieser ähnelt vorausgesetzt:

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

Um den Parameter „rows“ auf einen bestimmten Wert, beispielsweise 10, zu ändern, können Sie den folgenden Code verwenden :

const newUrl = updateURLParameter(window.location.href, 'rows', 10);

Die updateURLParameter-Funktion prüft, ob die Der Parameter „rows“ ist vorhanden. Wenn dies der Fall ist, ersetzt es seinen Wert durch den angegebenen. Wenn er nicht vorhanden ist, wird der Parameter am Ende der URL hinzugefügt.

Hinzufügen neuer Parameter

Alternativ, wenn der Parameter „rows“ nicht vorhanden ist in der ursprünglichen URL vorhanden ist, können Sie es mit derselben Funktion wie folgt hinzufügen:

const newUrl = updateURLParameter(window.location.href, 'rows', 10);

Dieser Code erstellt eine neue URL mit dem Parameter „rows“. und sein Wert wird auf 10 gesetzt.

Funktionsimplementierung

Hier ist eine voll funktionsfähige Implementierung der updateURLParameter-Funktion:

function updateURLParameter(url, param, paramVal) {
  const newAdditionalURL = "";
  const tempArray = url.split("?");
  const baseURL = tempArray[0];
  let additionalURL = tempArray[1];
  let temp = "";

  if (additionalURL) {
    const tmpAnchor = additionalURL.split("#");
    additionalURL = tmpAnchor[0];
    additionalURL = additionalURL.split("&");

    for (const key in additionalURL) {
      if (additionalURL[key].split('=')[0] !== param) {
        newAdditionalURL += temp + additionalURL[key];
        temp = "&";
      }
    }
  }

  const rows_txt = temp + "" + param + "=" + paramVal;
  return baseURL + "?" + newAdditionalURL + rows_txt;
}

Um diese Funktion zu verwenden , übergeben Sie einfach die aktuelle URL, den Parameter, den Sie ändern oder hinzufügen möchten, und seinen Wert. Die Funktion gibt eine neue URL mit den angegebenen Änderungen zurück.

Mit diesen JavaScript-Techniken können Sie URL-Parameter dynamisch bearbeiten und so das Verhalten Ihrer Webanwendungen einfach anpassen und steuern.

Das obige ist der detaillierte Inhalt vonWie kann ich URL-Parameter mit JavaScript manipulieren und ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!