はじめに

JavaScript で URL のクエリパラメータ部分を操作する方法を調べた。

TL;DR

  • const url = new URL(location) で初期化
  • url.searchParams.set("hoge", "fuga") などで設定
  • url.href や url.toString() で設定後の URL を出力
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 初期化
    2. searchParams で操作する
      1. get: パラメータの確認
      2. set: パラメータの設定(追加/更新)
      3. delete: パラメータの削除
      4. has: パラメータの確認
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.14.5
BuildVersion:	18F132

Google Chrome バージョン: 76.0.3809.100（Official Build） （64 ビット）

詳細

URL.searchParams を使うことで、簡単に操作ができる。

Qiita で test で検索した結果(いいね順) を例に試していく。

初期化

new URL(location) で初期化。

1
const url = new URL(location);

どんな変数やメソッドがあるか確認してみる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
url.toString();
// => 'https://qiita.com/search?q=test&sort=like'

url.href;
// => 'https://qiita.com/search?q=test&sort=like'

url.hostname;
// => 'https://qiita.com'

url.pathname;
// => '/search'

url.protocol;
// => 'https:'

url.search;
// => '?q=test&sort=like'

searchParams で操作する

searchParams で様々な操作ができる。中身は URLSearchParams らしい。

URL インターフェースの searchParams プロパティは、URL に含まれる GET クエリ引数にアクセスできる URLSearchParams オブジェクトを返します。

URL.searchParams - Web API | MDN より引用

できる操作一覧、get, set, delete, has あたりだけおさえておけば良さそう。

  • append(): 指定されたキーと値のペアを新しい検索パラメーターとして追加します。
  • delete(): 指定された検索パラメーターとその値を、検索パラメーターのリストから削除します。
  • entries(): このオブジェクトに含まれる全てのキーと値のペアを列挙するための iterator を返します。
  • get(): 指定された検索パラメーターに対応する最初の値を返します。
  • getAll(): 指定された検索パラメーターに対応する全ての値を返します。
  • has(): 指定された検索パラメーターが存在するかを表す Boolean 値を返します。
  • keys(): このオブジェクトに含まれる全てのキーと値のペアのキーを列挙する iterator を返します。
  • set(): 指定された検索パラメーターに対応する値を設定します。複数の値が存在していた場合、それらは削除されます。
  • sort(): 全てのキーと値のペアを、キーを基準にソートします。
  • toString(): URL で使用するのに適したクエリー文字列を返します。
  • values(): このオブジェクトに含まれる全てのキーと値のペアの値を列挙する iterator を返します。

URLSearchParams - Web API | MDN より引用

get: パラメータの確認

クエリパラメータの値を取得する。クエリが存在しない場合は null を返却。

1
2
3
4
5
6
7
8
url.toString();
// => "https://qiita.com/search?q=test&sort=like"

url.searchParams.get("sort");
// => "like"

url.searchParams.get("foo");
// => null

set: パラメータの設定(追加/更新)

クエリパラメータを設定(追加 or 更新)する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
url.toString();
// => "https://qiita.com/search?q=test&sort=like"

// 追加
url.searchParams.set("foo", "bar");

url.searchParams.get("foo");
// => "bar"

url.toString();
// => "https://qiita.com/search?q=test&sort=like&foo=bar"

// 更新
url.searchParams.set("foo", "hoge");

url.searchParams.get("foo");
// => "hoge"

url.toString();
// => "https://qiita.com/search?q=test&sort=like&foo=hoge"

delete: パラメータの削除

クエリパラメータを削除する。存在しないものを指定しても、エラーにはならない。

1
2
3
4
5
6
7
8
9
10
11
url.toString();
// => "https://qiita.com/search?q=test&sort=like&foo=hoge"

// 削除
url.searchParams.delete("foo")

url.toString()
// => "https://qiita.com/search?q=test&sort=like"

// 存在しないパラメータを指定してもエラーにはならない
url.searchParams.delete("bar")

has: パラメータの確認

クエリパラメータの有無を確認する。

1
2
3
4
5
6
7
8
url.toString()
// => "https://qiita.com/search?q=test&sort=like"

url.searchParams.has("sort")
// => true

url.searchParams.has("foo")
// => false

まとめ

  • const url = new URL(location) で初期化
  • url.searchParams.set("hoge", "fuga") などで設定
  • url.href や url.toString() で設定後の URL を出力

その他・メモ

クエリパラメータを変更した後に location.href = url.toString() とかすれば移動できて便利。

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list