htmlフォームでname属性に[]がついているものを配列/オブジェクトで管理したい。

実現したいこと

フォームの一部で、複数人の氏名をフォームで管理しているとします。

html
1<p>１人目</p>
2<input type="text" name="member[0][sei]" value="日本" />
3<input type="text" name="member[0][mei]" value="太郎" />
4
5<p>2人目</p>
6<input type="text" name="member[1][sei]" value="北海" />
7<input type="text" name="member[1][mei]" value="道子" />

上記のように入力されたフォーム要素を、フロントのJavaScriptで、送信前に次のように、配列/オブジェクトで管理したいです。

js
1input = {
2  member: [
3    {
4      sei: "日本"
5      mei: "太郎"
6    },
7    {
8      sei: "北海"
9      mei: "道子"
10    }
11  ]
12}

何も気にせず、フォーム送信すると、バックエンド側でうまい具合に配列に変換されますが、それをフロント側で制御できればと思っています。

やったこと

js
1const inputs = document.querySelectorAll('form input[type=text]')
2inputs.forEach(function(ele){
3    // ゴニョゴニョ
4})

とすると、それぞれのtext要素にはアクセスできるのですが、
name属性のパースをできているわけではないため、うまく解決に至っていません。
何らかの方法はあるのでしょうか？

補足

加えて、より複雑なフォームになる場合は、さらに階層が増えることもあり、それらもうまく制御できると尚良いと思っています。

html
1<input type="text" name="member[0][info][0][aaa]" value="" />
2<input type="text" name="member[0][info][1][aaa]" value="" />
3<input type="text" name="member[1][info][0][aaa]" value="" />
4<input type="text" name="member[1][info][1][aaa]" value="" />

ReactやVueなどで管理するという方法があるのは理解しているのですが、
必要な箇所が箇所だけなので、ライブラリを使用せず、プレーンなjavascriptで実装したいです

m.ts10806

2023/03/03 06:23

>name属性のパースをできているわけではないため element のnameプロパティでとれませんか？

int32_t

2023/03/03 07:50

> name属性のパースをできているわけではないため、うまく解決に至っていません。パーズする処理を書けばよいと思うのですが、何か困っていることがあるのでしょうか。

eternalbeginne

2023/03/03 13:41

> element のnameプロパティでとれませんか？パースした状態では取れませんでした > パーズする処理を書けばよいと思うのですが、何か困っていることがあるのでしょうか。よくある事象だと思うので、パースに便利な組込関数がありそうに思い、自分では見つけれなかったため質問させていただいた次第です。

int32_t

2023/03/03 15:41

> よくある事象だと思うので、パースに便利な組込関数がありそうに思い個人的にはよくある処理ではないと思います。とくに便利な関数とかはないので、地道に文字列処理をするしかないでしょう。