jsでhtmlの指定タグの指定id属性を{ 部分一致で }取得したい。

Question

補足：実際は可変値でforeachで回しています。今はわかりやすいよう固定値に設定しています。

$num = 1;
$cnt = 1;
<div id="test_div_<?php echo $num; ?>_<?php echo $cnt; ?>">

悩み1
こうなっている場合、jsでtest_div_となっている部分で検索をかけて、id値全て取得したいんですが、やり方はありますか？
getelementbyidだと全て(test_div_1_1)と入力しなければならないので困っています。

悩み2

$div_id = $('#test_div_' + num + '_' + cnt);

numとcntを別々で取得してから、こんな感じに取得できないですか。
そうなると、numとcntを取得...の部分がまた謎です。

何かやり方はありますか？

やりたいことは、test_div_とついているdivのid値を全て取得したい。

Comments

[yambejp]

> id値を全て取得したい

test_div_1_1を取得したいのか、[1,1]を取得したいのかちょっと曖昧です

[momolength]

遅くまでお疲れ様です。
明日もう一度整理して送りますが、そのままお答えすると｢test_div_1_1｣のほうです。
一括で取得できるんですかね。
numとcntわけずとも。

回答もありがとうございます。明日見ます。すいません。

Answer 1

<div id="test_div_1_1">1_1</div>
<div id="test_div_123_456">123_456</div>
<div id="test_div_1_dummy">dummy</div>
<script>
const res=[...document.querySelectorAll('[id]')].map(x=>x.id).filter(x=>/^test_div_\d+_\d+$/.test(x)).map(x=>(y=x.match(/^test_div_(\d+)_(\d+)$/),[y[1],y[2]]));
console.log(res);
</script>

Comments

[momolength]

ありがとうございます。
>res=[...document.querySelectorAll
すいません、この･･･はどういった意味でしょうか？

[yambejp]

> [...document.querySelectorAll('[id]')]

idという属性をもった要素すべてを配列に設定するという意味です

[momolength]

「...」も含めてなんですね...。調べ方悪かったようです。ありがとうございます。
他のも調べて見てみます。

[momolength]

Uncaught TypeError: /^div_test_\d+_\d+$/.test is not a function
と出てしまいましたね。

[yambejp]

> Uncaught TypeError

環境はなんでしょう？
普通にやればコピペでidにある数値だけ拾えるはずです

[momolength]

https://tyrano-complete.blogspot.com/2020/02/what-is-this-uncaught-typeerror-is-not-function.html
.testとしているのがダメなようですが、環境というのは何を指していますか。
cakephp2のphpは5系になります。
この.testという変数名を関数に使うのはバージョンによって可否が異なるんでしょうか。すいません、わからなくて。調べつつ二なります。

[yambejp]

環境とはOSとかブラウザの種類やバージョンです。
サーバーは関係ありません。個別のブラウザの問題だと思います
また正規表現のtestメソッドは大抵のブラウザでサポートされているはずです

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test#browser_compatibility

[momolength]

ちょっと挿入する場所が間違っており、正しい場所に入れたところ認識されました。
数字のみの認識であっているので、maisumakunさんの回答よりこちらを選ばせていただきました。結果もこちらのほうが見やすかったです。
大変失礼しました。

Answer 2

jsでtest_div_となっている部分で検索をかけて、id値全て取得したいんですが、やり方はありますか？

前方一致セレクタを使えば手早いです。

const elements = document.querySelectorAll('[id^="test_div_"]');
const ids = [...elements].map(elem => elem.id);

Comments

[momolength]

const elements = document.querySelectorAll('[id^="test_div_"]');
まずこれで取得できたんですね...。
これをidsの中でって感じですね。わかりやすいです。

[yambejp]

命題のように後ろに数値がくるかどうかわからないので
むしろ非効率かなと・・・
（私の回答につけたようなダミーがひっかかる）

[maisumakun]

「jsでtest_div_となっている部分で検索をかけて」とあったので、ダミーのものも引っかかってもいいと判断しました。

[yambejp]

私も最初はそうおもったのですが「numとcntを取得」という表現が
気になったので・・・