jsでHTMLの文字列からidだけを抜き出して配列に入れたい

Question

jsでHTMLの文字列からidだけを抜き出して配列に入れたい

例えば以下のような文字列があります。

var str ='
  <div id="1">text-1</div>
  <div id="3">text-3</div>
  <div id="4">text-4</div>
  <div id="2">text-2</div>
  <div id="5">text-5</div>
';

それを以下のようにidだけ抜き出して配列に入れるにはどうしたらいいでしょうか？

var list = [1,3,4,2,5];

元のHTMLの文字列のidは、数字のみです。よろしくお願いいたします。

やってみたこと

正規表現でできるのでは？と思い、とりあえず調べてみてdiv単位で分けて配列に入れることはできました。

var str = '<div id="1">text-1</div><div id="3">text-3</div><div id="4">text-4</div><div id="2">text-2</div><div id="5">text-5</div>';
var list = str.match(/<div(?: .+?)?>.*?</div>/g);

ただidだけ抜き出すというやり方が分からず困っております・・・

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[haruki0736]

回答ありがとうございます！
正規表現で出来るのでは？と思いいろいろ試しております。「やってみたこと」にも追記いたしました。
ですが、ここで詰まって昨日から進んでおらず困っております・・・
もしよろしければご教授いただけると助かります<(_ _)>

[kyoya0819]

正規表現はmustですか？
また数字に規則性はありますか？

[haruki0736]

質問ありがとうございます<(_ _)>
「idの数字だけを抜き出して配列にいれる」ということが出来れば正規表現じゃなくても大丈夫です。
数字には特に規則性はありません。

Answer 1

こんにちは

ご質問に

var list = [1,3,4,2,5];

とあったので、最終的に list という変数に、（文字列ではなく）数値の配列を得るコードを回答します。

(1) 正規表現を使う

var list = str.match(/"\d"/g).map(s => +s.replace(/"/g,  ''));

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/KKKbpEY?editors=0012

(2) HTMLをパースしてDOM操作から取得

こんな方法もあります。

var parser = new DOMParser();
var doc = parser.parseFromString(str, "text/html");

var list = [...doc.querySelectorAll('div')].map(e => +e.id);

• **動作確認用CodePen: **https://codepen.io/jun68ykt/pen/QWWzjjR?editors=0012

(3)正規表現を使う（その2)

正規表現を使う場合、こんなやり方でもできます。

var regexp = /"(\d)"/g;

var list = [];
var m;
while (m = regexp.exec(str)) {
  list.push(+m[1]);
}

• **動作確認用CodePen: **https://codepen.io/jun68ykt/pen/GRRPpvw?editors=0012

(4)正規表現を使う（その3)

はじめに挙げた「(1) 正規表現を使う」 の修正版です。
match に与える正規表現に、先読みと後読みを使って、 " で囲まれた数字だけをマッチさせるようにすると、replace で " を削る処理が不要になります。

var list = str.match(/(?<=")\d(?=")/g).map(s => +s);

• **動作確認用CodePen: **https://codepen.io/jun68ykt/pen/pooqjBE?editors=0012

参考になれば幸いです。

Comments

[haruki0736]

ありがとうございます！！
思い通りの実装ができた上に、こんなに早く解決方法が頂けて感動です！
今回は、(1) 正規表現を使うの方で制作を進めていきたいと思います。
ありがとうございました<(_ _)>

[jun68ykt]

どういたしまして。
> 思い通りの実装ができた
とのことでよかったです????

[haruki0736]

追記していただいた方法も拝見しました！
いろんな方法があるんですね！
重ね重ねありがとうございます<(_ _)>