JavaScript でクエリ文字列パラメータを追加または更新するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript でクエリ文字列パラメータを追加または更新するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-12-04 21:01:12

オリジナル

903 人が閲覧しました

How Can I Add or Update Query String Parameters in JavaScript?

JavaScript を使用したクエリ文字列パラメータの追加と更新

Web 開発では、クエリ文字列パラメータはサーバー側スクリプトにデータを渡すために使用されます。またはページの URL を変更します。これは、検索クエリにフィルターを追加したり、ユーザートラフィックを追跡したり、Web サイト分析を改善したりするためによく行われます。

一般的な課題の 1 つは、クエリ文字列パラメーターが既に存在するか存在しない場合に更新または追加することです。これに対処するには、カスタム JavaScript 関数を実装できます。

解決策

タスクを実行する JavaScript 関数は次のとおりです。

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&amp;])" + key + "=.*?(&amp;|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&amp;" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '' + key + "=" + value + '');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

ログイン後にコピー

Usage

関数を使用するには、次の引数:

uri: クエリ文字列パラメーターの有無にかかわらず、元の URL
key: 追加または更新するクエリ文字列パラメーターの名前
value : に設定する値パラメータ

例

http://example.com/search?query=test のような URL があるとします。値 new query でクエリパラメータを更新するには、次のように関数を呼び出します:

var updatedUri = updateQueryStringParameter('http://example.com/search', 'query', 'new query');
console.log(updatedUri); // Output: http://example.com/search?query=new query

ログイン後にコピー

パラメータが元の URL に存在しない場合は、パラメータが追加されます:

var updatedUri = updateQueryStringParameter('http://example.com/search', 'new_param', 'new value');
console.log(updatedUri); // Output: http://example.com/search?new_param=new value

ログイン後にコピー

この関数は、JavaScript でクエリ文字列パラメータを操作する便利な方法を提供し、必要に応じて特定のパラメータ値を簡単に追加または更新できるようにします。

以上がJavaScript でクエリ文字列パラメータを追加または更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。