JavaScript を使用して URL パラメータを操作および変更するにはどうすればよいですか?

JavaScript を使用した URL パラメータの変更とデフォルトの指定

動的に生成された URL がますます普及しているため、URL パラメータを柔軟に操作できることが重要です効率的に。この記事では、JavaScript を使用して URL にパラメータを変更および追加する方法について説明します。

パラメータ値の変更

次のような URL があるとします。提供:

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

「rows」パラメータを特定の値、たとえば 10 に変更するには、次のコードを使用できます。 :

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

updateURLParameter 関数は、「rows」パラメータが存在するかどうかを確認します。存在する場合は、その値を指定された値に置き換えます。存在しない場合は、パラメータを URL の末尾に追加します。

新しいパラメータの追加

または、「rows」パラメータが存在しない場合は、初期 URL に存在する場合は、次のように同じ関数を使用して追加できます。

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

このコードは、「rows」パラメータとその値を 10 に設定した新しい URL を作成します。

関数の実装

ここでは、updateURLParameter 関数の完全に機能する実装を示します:

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

この関数を使用するには、現在の URL と必要なパラメータを渡すだけです。変更または追加する項目とその値。この関数は、指定された変更が加えられた新しい URL を返します。

これらの JavaScript テクニックを使用すると、URL パラメーターを動的に操作でき、Web アプリケーションの動作のカスタマイズと制御が容易になります。

以上がJavaScript を使用して URL パラメータを操作および変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。