JavaScriptでフォーム内配列要素の要素数

質問

いつもお世話になっております

へんな質問で申し訳ございません
CMSなどを使っているとフォーム内に配列形式になった名称をよく見かけるのですが
仮に下記のような場合に
JavaScript内で各フォームの各々の要素数を取得することは可能でしょうか？

<form name="f">
<input type="text" name="scf[配列１][0]" value="" class="widefat">
<input type="text" name="scf[配列１][1]" value="" class="widefat">
<input type="text" name="scf[配列１][2]" value="" class="widefat">

<input type="text" name="scf[配列２][0]" value="" class="widefat">
<input type="text" name="scf[配列２][1]" value="" class="widefat">
<input type="text" name="scf[配列２][2]" value="" class="widefat">
<input type="text" name="scf[配列２][3]" value="" class="widefat">
</form>

例えばJavaScriptで
var nLenA = formname(scf[配列１]).length;
var nLenB = formname(scf[配列２]).length;
とすると
nLenAの値は3
nLenBの値は4
という具合に配列数を取得してこれらを制御したいと考えています

おいそがしいところ申し訳ございませんが
わかる方がいらっしゃいましたらご教授お願い致します

回答No.1

superside0 · ベストアンサー

inputタグのnameに []を使っても、JavaScript上では
配列や連想配列には、なってくれないようなので
フォームオブジェクトのelements["nameでつけた名前そのまま"]で
入ってくれているのを取り出すしかないようです。

ただ、form上で
<input type="text" name="scf[配列1][]" value="">
<input type="text" name="scf[配列1][]" value="">
<input type="text" name="scf[配列1][]" value="">
のように、nameがまったく同じであれば
　n = document.forms.f.elements["scf[配列1][]"].length
で name="scf[配列1][]"が 3個あるというのは取り出せます。
しかし
<input type="text" name="scf[配列1][0]" value="">
<input type="text" name="scf[配列1][1]" value="">
<input type="text" name="scf[配列1][2]" value="">
のようになっていると　elements[]内では、
"scf[配列1][0]"
"scf[配列1][1]"
"scf[配列1][2]"
のように異なる名前になっているので、
document.forms.f.elements["scf[配列1][]"].length
や
document.forms.f.elements["scf[配列1]"].length
としても、そんなオブジェクトはないというエラーになってしまいます。

なのでこの場合、泥臭いですが
n = 0;
for ( i = 0; i < document.forms.f.elements.length; i++ ) {
if (document.forms.f.elements[i].name.match(/scf\[配列１\]\[[0-9]+\]/)) n++;
//elements[i].nameを　scf[配列1][数値]の正規表現でマッチさせてカウント
}
って感じでカウントするしかないのでしょう。

もしくは、elements[]に入っているnameを使って配列に変換してくれる
汎用的な関数があれば、それを使うのが簡単そうですが、
ただ、formで入ってきたname値をなんでもかんでも配列に変換してしまうと
この処理に前に作っておいた変数を上書きしてしまう危険もあるし
場合によっては、XSS攻撃されてしまうので慎重にしたほうがよいかもです。

他に適切な方法があるようなら私も知りたいです。

回答No.2

Proof4

要素をクエリセレクタを用いて取得すると簡単に実現できます。具体的には

const nLenA = document.querySelectorAll('[name^="scf[配列1]"]').length;

のようにします。
[name^="scf[配列1]"] がクエリセレクタで、name属性の値が scf[配列1] で前方一致する要素をすべて取得します。