[JavaScript] HTML内のJavaScriptでURLのGETパラメータ値を取得する

投稿日：2025年3月21日

HTML内のJavaScriptでURLのGETパラメータ値を取得するサンプルです。

サンプルソース

例）URLのGetパラメータを取得して、JavaScriptの変数にセットする

// Getパラメータの例：https://example.com?item=Apple&price=980

// クエリパラメータを取得
const urlParams = new URLSearchParams(window.location.search);

// パラメータ値を取得
const item = urlParams.get('item');
const price = urlParams.get('price');

console.log(item); // "Apple"
console.log(price); // "980"

// Getパラメータの例：https://example.com?item=Apple&price=980

// クエリパラメータを取得

const urlParams = new URLSearchParams(window.location.search);

// パラメータ値を取得

const item = urlParams.get('item');

const price = urlParams.get('price');

console.log(item); // "Apple"

console.log(price); // "980"

解説

URLSearchParams APIを使用すると簡単にURLのクエリパラメータを取得できます。
「window.location.search」では、現在のURLのクエリ文字列を取得しています。上記例では、?item=Apple&price=980が取得できます。

執筆者：とら