[jquery] URLから１つのキーが持つ複数の値を全て取得したい

前提・実現したいこと

javascriptで、URLからパラメータの値を取得しようと試みています。
１つのキーに対し１つの値が対応している場合は以下のコードで取得できているのですが、
１つのキーが複数の値を持つ場合、最後に表示される値しか取得できません。
この複数の値を全て取得したいと考えています。

発生している問題・エラーメッセージ

当該ページのURL
http://localhost:3000/index?key%5B%5D=2&key%5B%5D=3

以下、　console.log(arg.key)の結果

該当のソースコード

javascript
1    var arg  = new Object;
2    var url = location.search.substring(1).split('&');
3    for (var i = 0; url[i]; i++) {
4      var k = url[i].split('%5B%5D=');
5      arg[k[0]] = k[1];
6    }
7    console.log(arg.key);
8
9

上記の例では、[2, 3]という配列を出力できればと考えています。

よろしくお願いいたします。

行動規範の内容に同意します

回答3件

Re: kotahayashi さん

投稿2018/04/14 06:33

編集2018/04/14 06:35

think49

総合スコア18194

think49

2018/04/14 06:37

MDNのサンプルが悪いですね。 URLSearchParamsコンストラクタを使わずとも、プロパティから参照可能です。

defghi1977

2018/04/14 06:39

getAllのほうが適切ですね

行動規範の内容に同意します

ベストアンサー

URLSearchParamsを使った方法です。

JavaScript
1//let paramsString = "?key%5B%5D=2&key%5B%5D=3";
2let paramsString = location.search;
3let searchParams = new URLSearchParams(paramsString);
4console.log(searchParams.getAll("key[]"));

◇余談
parameterのkey%5B%5Dですが、もしも変更できるならKey=カンマ区切りにして値を渡すほうがシンプルになるかと。

JavaScript
1Key=1,2

投稿2018/04/14 06:39

umyu

総合スコア5846

think49

2018/04/14 07:07

> Key=1,2 JavaScriptではCSVパーサが標準化されていないので、エスケープが必要な値だとparse処理が余計にかかります。また、PHPの場合は key[] で渡せば自動的に配列化されるので、現状も悪くはないと思っています。

umyu

2018/04/14 07:12

＞think49さんへなるほど、参考になります。

kotahayashi

2018/04/14 09:00

皆様ご回答くださりありがとうございました。初心者の私にも大変わかりやすいご回答で、このまま実装しましたので、こちらをベストアンサーといたしました。ちなみにですが、ruby on railsを使用しています。一部のキーはkey[]のように配列で渡しています。

行動規範の内容に同意します

この手のURLの解析は手で行なってはなりません. 専用のAPIが用意されているので, それを使いましょう.

JavaScript
1const url = new URL("http://localhost:3000/index?key%5B%5D=2&key%5B%5D=3");
2const values = [...url.searchParams.values()];
3//[ "2", "3" ]
4
5//getAllで釣るほうが良かろう
6console.log(url.searchParams.getAll(decodeURI("key%5B%5D")));
7//[ "2", "3" ]