web-dev-qa-db-ja.com

JavaScriptでURLクエリパラメータを解析するにはどうすればよいですか？

可能性のある複製：
javascriptのURLのgetパラメーターを使用
JavaScriptでクエリ文字列値を取得するにはどうすればよいですか？

Javascriptでは、URL文字列のパラメータ（現在のURLではない）を取得するにはどうすればよいですか？

好む：

www.domain.com/?v=123&p=hello

JSONオブジェクトで「v」と「p」を取得できますか？

javascripturlquery-stringstring-parsing
73
user847495

今日（この回答の2.5年後）に 安全に使用Array.forEachができます。 @ricosrealmが示唆するように、この関数ではdecodeURIComponentが使用されました。

function getJsonFromUrl(url) {
  if(!url) url = location.search;
  var query = url.substr(1);
  var result = {};
  query.split("&").forEach(function(part) {
    var item = part.split("=");
    result[item[0]] = decodeURIComponent(item[1]);
  });
  return result;
}

実際にはそれほど単純ではありません、コメントのピアレビュー、特に：

  • ハッシュベースのルーティング（@cmfolio）
  • 配列パラメーター（@ user2368055）
  • decodeURIComponent（@AndrewF）の適切な使用

たぶん、これはコードレビューSEに行くはずですが、ここはより安全で正規表現のないコードです：

function getJsonFromUrl(url) {
  if(!url) url = location.href;
  var question = url.indexOf("?");
  var hash = url.indexOf("#");
  if(hash==-1 && question==-1) return {};
  if(hash==-1) hash = url.length;
  var query = question==-1 || hash==question+1 ? url.substring(hash) : 
  url.substring(question+1,hash);
  var result = {};
  query.split("&").forEach(function(part) {
    if(!part) return;
    part = part.split("+").join(" "); // replace every + with space, regexp-free version
    var eq = part.indexOf("=");
    var key = eq>-1 ? part.substr(0,eq) : part;
    var val = eq>-1 ? decodeURIComponent(part.substr(eq+1)) : "";
    var from = key.indexOf("[");
    if(from==-1) result[decodeURIComponent(key)] = val;
    else {
      var to = key.indexOf("]",from);
      var index = decodeURIComponent(key.substring(from+1,to));
      key = decodeURIComponent(key.substring(0,from));
      if(!result[key]) result[key] = [];
      if(!index) result[key].Push(val);
      else result[key][index] = val;
    }
  });
  return result;
}

また、 この記事 に従って、エンコードされていない+をスペースに置き換えました。これは、RFC 3986に準拠したエンコード方法のガイドでもあります。

result[key][index] = valに注意してください。新しい配列項目が作成され、列挙可能であるため、forEach呼び出しで反復できます。したがって、次のようなURLでも解析できます。

var url = "?foo%20e[]=a%20a&foo+e[%5Bx%5D]=b&foo e[]=c";
// {"foo e": ["a a",  "c",  "[x]":"b"]}

var obj = getJsonFromUrl(url)["foo e"];
for(var key in obj) { // Array.forEach would skip string keys here
  console.log(key,":",obj[key]);
}
/*
  0 : a a
  1 : c
  [x] : b
*/
111
Jan Turoň

次のようなパラメーターを含むJavaScriptオブジェクトを取得できます。

var regex = /[?&]([^=#]+)=([^&#]*)/g,
    url = window.location.href,
    params = {},
    match;
while(match = regex.exec(url)) {
    params[match[1]] = match[2];
}

正規表現はおそらく改善される可能性があります。単に=文字で区切られた名前と値のペアを探し、&文字（または最初の場合は=文字）で区切られたペア自体を探します。たとえば、上記の結果は次のようになります。

{v: "123", p: "hello"}

実施例 です。

29
James Allardice