URLSearchParamsを使ってURLのクエリ文字列から値を取得する方法
2024-04-02
JavaScriptでURLのクエリ文字列から値を取得する方法
URLのクエリ文字列は、"?""の後に続く文字列で、パラメータと値のペアを("&"で区切って記述します。この文字列から値を取得するには、いくつかの方法があります。
方法
URLSearchParamsは、URLのクエリ文字列を操作するためのオブジェクトです。
// URLSearchParamsのインスタンスを作成
const params = new URLSearchParams(window.location.search);
// パラメータの値を取得
const value = params.get("パラメータ名");
location.searchは、現在のURLのクエリ文字列を取得します。
// クエリ文字列を取得
const search = window.location.search;
// パラメータの値を取得
const value = search.match(/パラメータ名=([^&]*)/)[1];
自作関数を使う
以下のコードは、URLのクエリ文字列からパラメータと値のペアをオブジェクトに変換する関数です。
function getQueryVars() {
const vars = {};
window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
vars[key] = value;
});
return vars;
}
// パラメータの値を取得
const value = getQueryVars()["パラメータ名"];
ライブラリを使う
jQueryなどのライブラリを使うと、より簡単にクエリ文字列から値を取得できます。
// jQueryを使う
const value = $.getUrlVar("パラメータ名");
補足
- パラメータ名が複数存在する場合は、上記の方法を繰り返し実行することで、すべての値を取得できます。
- パラメータの値に特殊文字が含まれている場合は、エンコードされている可能性があります。デコードする必要がある場合は、decodeURIComponent()関数を使用します。
プラグイン
URLのクエリ文字列を操作するプラグインも多数存在します。以下は、代表的なプラグインです。
これらのプラグインを使うと、より簡単にクエリ文字列を操作できます。
JavaScriptでURLのクエリ文字列から値を取得するには、いくつかの方法があります。上記の方法を参考に、自分に合った方法を選択してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
</head>
<body>
<script>
// URLSearchParamsを使う
const params = new URLSearchParams(window.location.search);
const value1 = params.get("パラメータ1");
// location.searchを使う
const search = window.location.search;
const value2 = search.match(/パラメータ2=([^&]*)/)[1];
// 自作関数を使う
function getQueryVars() {
const vars = {};
window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) {
vars[key] = value;
});
return vars;
}
const value3 = getQueryVars()["パラメータ3"];
// ライブラリを使う (jQuery)
const value4 = $.getUrlVar("パラメータ4");
// 取得した値を表示
console.log("パラメータ1:", value1);
console.log("パラメータ2:", value2);
console.log("パラメータ3:", value3);
console.log("パラメータ4:", value4);
</script>
</body>
</html>
実行方法
- 上記のコードをHTMLファイルに保存します。
- ブラウザでファイルを開きます。
- URLに"?パラメータ1=値1&パラメータ2=値2&パラメータ3=値3&パラメータ4=値4"を追加してEnterキーを押します。
- コンソールを確認すると、取得した値が表示されます。
params.get("パラメータ名")：URLSearchParamsのget()メソッドを使って、指定されたパラメータの値を取得します。search.match(/パラメータ名=([^&]*)/)[1]：location.searchプロパティを使って、クエリ文字列を取得し、正規表現を使ってパラメータの値を取得します。getQueryVars()：自作関数を使って、URLのクエリ文字列からパラメータと値のペアをオブジェクトに変換します。$.getUrlVar("パラメータ名")：jQueryライブラリの$.getUrlVar()関数を使って、指定されたパラメータの値を取得します。
注意事項
- 上記のコードはサンプルです。必要に応じて修正してください。
- URLのクエリ文字列は、ユーザーが入力できるため、悪意のあるコードが含まれている可能性があります。取得した値をそのまま使用する場合は、サニタイズ処理を行うなど、セキュリティ対策に注意してください。
URLのクエリ文字列から値を取得する他の方法
window.location.hrefは、現在のURL全体を取得します。
// URL全体を取得
const href = window.location.href;
// パラメータの値を取得
const value = href.match(/パラメータ名=([^&]*)/)[1];
document.location.hrefは、現在のURL全体を取得します。window.location.hrefとほぼ同じですが、こちらはフレーム内で使用する場合に便利です。
// URL全体を取得
const href = document.location.href;
// パラメータの値を取得
const value = href.match(/パラメータ名=([^&]*)/)[1];
history.stateは、ページ遷移履歴に保存されたデータを取得します。
// history.stateを取得
const state = history.state;
// パラメータの値を取得
const value = state.パラメータ名;
URLのパースライブラリを使うと、より簡単にクエリ文字列から値を取得できます。以下は、代表的なライブラリです。
これらのライブラリを使うと、以下のメリットがあります。
- クエリ文字列を簡単にパースできる
- パラメータのエンコード/デコードを自動的に行ってくれる
javascript url plugins
