Skip to content

JavaScriptでURLパラメータを簡単に取得、書き換える関数

URL やクエリパラメータを取得、変更したいときに使えるシンプルな関数を作成しました。

パラメータの追加や削除といった、単純なようでイチから実装するのが面倒な処理を、name や value を指定するだけで実行できるようにしています。

ソース

ES6.ver (クラス構文、アロー関数を使っています)

ES5.ver

解説・使用例

実装したメソッドを紹介します。

プロパティ

名称や値は window.location のプロパティに合わせています。
参考:window.location – Web API インターフェイス | MDN

  • href:完全なURL
  • protocol:プロトコル
  • host:ホスト名+ポート番号
  • hostname:ホスト名
  • port:ポート番号
  • pathname:パス
  • search:クエリパラメータ(? を含む)
  • hash:ハッシュ(# を含む)
  • pathnames:パスを “/” に分割した配列
  • searches:各クエリパラメータを { name, value } の形のオブジェクトに変換した配列

メソッド

メソッドはすべて元のオブジェクトを変更せず、新しい UrlHandler オブジェクトを返します。

deleteSearch(name = null, value = null)

パラメータを削除します。

name が指定されている場合は name に一致するパラメータのみ削除、name, value が指定されている場合は name, value に一致するパラメータのみ削除、引数を省略した場合はすべてのパラメータを削除します。

setSearch(name = ”, value = ”)

name, value で指定したパラメータを追加します。

name が重複する場合、元の値を上書きします。

sortSearch(sortFunction = (itemA, itemB) => itemA.name < itemB.name ? -1 : 1)

パラメータを並び替えます。

引数を省略した場合、name の辞書順にソートします。

deleteHash()

ハッシュを削除します。

setHash(value = ”)

value で指定したハッシュを追加します。

すでにハッシュが含まれている場合、元の値を上書きします。

 

Comments are closed.