JavaScript オブジェクトとしての URL パラメータの抽出

はじめに

この実験では、正規表現と配列メソッドを使って URL パラメータを抽出し、JavaScript オブジェクトにマッピングする方法を探ります。String.prototype.match() を使ってすべてのキーバリューペアを取得し、Array.prototype.reduce() を使ってそれらを単一のオブジェクトに変換する方法を学びます。この実験が終わるとき、URL を操作し、そこから有用な情報を抽出する方法をより深く理解しているでしょう。

URL パラメータを持つオブジェクト

現在の URL のパラメータを含むオブジェクトを作成するには、次の手順に従います。

ターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。
適切な正規表現を使って String.prototype.match() を使ってすべてのキーバリューペアを抽出します。
Array.prototype.reduce() を使ってそれらをマッピングし、単一のオブジェクトに結合します。
現在の URL に適用するために引数として location.search を渡します。

以下がコードです。

const getURLParameters = (url) =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)),
      a
    ),
    {}
  );

この関数を使って任意の URL を使ってそのパラメータを持つオブジェクトを取得することができます。以下はいくつかの例です。

getURLParameters("google.com"); // {}
getURLParameters("http://url.com/page?name=Adam&surname=Smith");
// {name: 'Adam', surname: 'Smith'}

まとめ

おめでとうございます！あなたは URL パラメータをオブジェクトとしての実験を完了しました。あなたのスキルを向上させるために LabEx でさらに実験を練習することができます。