Help us understand the problem. What is going on with this article?

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

本文

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の組み合わせが使えます(コメントより)。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away