LoginSignup
0

More than 3 years have passed since last update.

JS URLのクエリをオブジェクトに変換する

Last updated at Posted at 2020-08-07

本文

JavaScriptでURLのクエリ部分をオブジェクトに変換するための関数群です。車輪の再発明だと思いますが毎回調べるので記録します。引数は型チェックしていません。

// URLからクエリ(?以降)を抜き出します。
function urlGetQuery(url) {
    const i = url.indexOf("?");
    return (i != -1) ? url.substring(i + 1) : null;
}

// URLのクエリから「=」より前をキー、後を値に持つオブジェクトを作成します。
function createQueryObjectForUrlQuery(query) {
    return Object.fromEntries(query.split("&").map(s => s.split("=")));
}

// URLからクエリを抜き出して、クエリの「=」より前をキー、後を値に持つオブジェクトを作成します。
function createQueryObjectForUrl(url) {
    return createQueryObjectForUrlQuery(urlGetQuery(url));
}

Google検索でYahooと調べた結果に適用すると次のようになります。

// Google検索でYahooを調べたときのYahoo!のURL(改変)
const url = "https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&url=https%3A%2F%2Fwww.yahoo.co.jp%2F&usg=...";
// URLからクエリ部分のオブジェクトを作成
const query = createQueryObjectForUrl(url);

// 全体を出力
console.log(query);
//>> Object { sa: "t", rct: "j", q: "", esrc: "s", source: "web", url: "https%3A%2F%2Fwww.yahoo.co.jp%2F", usg: "..." }

// urlをURIデコードして出力
console.log(decodeURIComponent(query.url));
//>> https://www.yahoo.co.jp/

蛇足

  • Object.fromEntriesにキーと値の配列を与えることで対応するオブジェクトが作成できます。
  • URLをデコードする関数はdecodeURIdecodeURIComponentがあります。今回は「:」「/」のような特殊文字もデコードしたいのでdecodeURIComponentを使用しています。
  • Internet Explorerを考慮しない場合はObject.fromEntriesURL.searchParamsの組み合わせが使えます(コメントより)。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0