タグ文字列を個別に配列に格納

Question

前提・実現したいこと

以前、こちらで質問した内容と関連があるのですが、
タグ文字列を個別に配列に格納するにはどうすればよいでしょうか？

var str = "<div>要素1</div><div>要素2</div><div>要素3</div>";

を、

arr = ["<div>要素1</div>", "<div>要素2</div>", "<div>要素3</div>"]

のように格納するイメージです。

試したこと

以前の質問では、

<div>要素1</div><div>要素2</div><div>要素3</div>

のDOMを作成してから、

querySelectorAll("div")

メソッドを呼び出せば、配列に格納できるでは？と考えていたのですが、
そもそも上記はDOMでないことをご教示いただいたので、
今回、意図したいことにどういう方法で実装できるか教えていただきたいです。
ご教示お願いします。

補足情報（FW/ツールのバージョンなど）

JavaScript

Comments

[hoshi-takanori]

最終的に何をしたいのか分かりません。要素1、要素2、要素3はどのような内容ですか？ また、配列に格納した後はどのように利用する予定ですか？

[tkshp]

配列に格納した後は、要素が重複するものを削除するという目的でした。配列格納後の処理は実装できていました。質問のようなHTML文字列を配列に格納するにはどうすればいいか知りたくなり、質問させていただきました。

Answer 1

こんにちは。以下のようにしてみると、いかがでしょうか？

var str = "<div>要素1</div><div>要素2</div><div>要素3</div>";

var parser = new DOMParser();
var doc = parser.parseFromString(str, "text/html");
var divs = doc.querySelectorAll("div");
var divStrings = [...divs].map(e => e.outerHTML);

console.log(divStrings);  // => ["<div>要素1</div>", "<div>要素2</div>", "<div>要素3</div>"]

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

　

• **参考：**MDN - DOMParser

もしくは、正規表現を使ってもできます。

var str = "<div>要素1</div><div>要素2</div><div>要素3</div>";

var divs = str.split(/(?<=</div>)\s*/);

console.log(divs);  // => ["<div>要素1</div>", "<div>要素2</div>", "<div>要素3</div>"]

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

追記

コメントから頂きました質問に回答します。

質問 1

・質問1。
親要素にdivがなく、divが3個並列に並んでいるものは、DOMではないと思っていたのですが、
parseできているので、divが3個並列に並んでいるものもDOMになるということでしょうか？

「divが3個並列に並んでいるものもDOMになる」
という解釈よりは、
「divが3個並列に並んでいる文字列でもDOMParserはparseしてくれて、(ドキュメントノードをルートとする、) DOMツリーを構築してくれる。」
という解釈のほうがより正確です。

ついては、

var str = "<div>要素1</div><div>要素2</div><div>要素3</div>";

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

というコードによって、変数 doc が参照するノードをルートとするDOMツリーがどのようなものになっているのかを表す資料を作成しました。（一枚ものです。スライドのタイトル Figure of DOM tree for the Q#254207 of teratail をクリックするとspeakerdeckのサイトにいき、拡大表示されます。）

md(!f3237ab600954ae49d6a328f73f6acbc,1.41436464088398)


上記の絵をコードで確認するには、doc から firstChild や nextSibling で、ノードをたどっていき、各ノードの、nodeType, tagName, nodeValue といったプロパティの値を確認するとよいかもしれません。

質問 2

・質問2。
[...divs]の[...XXX]という記法はどういった処理ですか？

... はスプレッド構文です。divs は querySelectorAll の返したNodeListオブジェクトが入っています。NodeListオブジェクトは配列（Array)ではありませんが、イテラブル(iterable)なオブジェクトです。イテラブルなオブジェクトに対して、 ... を使うと、最初から最後までのイテレーションによって発生（yield)された値のシーケンスが得られます。これを[] でくくって [...divs] とすると、divsの要素を要素とする配列(Array)が得られます。イテラブルとは何か？ということになると、イテレーターについて知る必要があります。以下はMDNの該当ページです。

• MDN: イテレーターとジェネレーター

質問 3

・質問3。

　正規表現がわからなく調べたのですが、
は直前の文字の0回以上の繰り返しなので、\sは、0回以上の空白(0回の場合は、空文字)で、
つまり、splitで</div>の後の、0回以上の空白で区切っているかと思うのですが、空白を考慮しているのは、

<div>要素1</div><div>要素2</div> だけでなく、 <div>要素1</div> <div>要素2</div> という文字列にも対応させるためなのかと考えたのですが、 では、単なる空文字は*で表現できるのかなと思い、 /(?<=</div>)*/ と試したところ、正規表現エラーとなりました。 <div>要素1</div><div>要素2</div>の場合の</div>の後の空文字は正規表現でどう表現できますか？ \s*だと空文字と同時にスペースも含まれますが、これしか表現方法はないですか？

はい。おっしゃるとおり、 \s* はちょっと気を利かせ過ぎました。

入力される文字列が、"<div>要素1</div><div>要素2</div><div>要素3</div>" というような、</div>から次の <div> までの間に空白文字がない前提であれば \s*は不要で、以下

var divs = str.split(/(?<=</div>)/);

で、意図した結果になります。

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

Comments

[tkshp]

ご回答ありがとうございます。
すみません、3点質問があります。

・質問1。
　親要素にdivがなく、divが3個並列に並んでいるものは、DOMではないと思っていたのですが、
　parseできているので、divが3個並列に並んでいるものもDOMになるということでしょうか？

・質問2。
　[...divs]の[...XXX]という記法はどういった処理ですか？

・質問3。
　正規表現がわからなく調べたのですが、
　*は直前の文字の0回以上の繰り返しなので、\s*は、0回以上の空白(0回の場合は、空文字)で、
つまり、splitで</div>の後の、0回以上の空白で区切っているかと思うのですが、空白を考慮しているのは、
<div>要素1</div><div>要素2</div>
だけでなく、
<div>要素1</div> <div>要素2</div>
という文字列にも対応させるためなのかと考えたのですが、
では、単なる空文字は*で表現できるのかなと思い、
/(?<=</div>)*/
と試したところ、正規表現エラーとなりました。
<div>要素1</div><div>要素2</div>の場合の</div>の後の空文字は正規表現でどう表現できますか？
\s*だと空文字と同時にスペースも含まれますが、これしか表現方法はないですか？

[jun68ykt]

コメントありがとうございます。
３点のご質問に対する回答を追記しましたので、ご確認ください。参考になれば幸いです。

[tkshp]

ご回答ありがとうございます。
知らなかった点が多々ありましたが、じっくり読ませていただき、とても勉強になりました。
質問1に関しては、
console.log(doc);
console.log(doc.firstChild.firstChild);
等で確認しました。
質問2に関してもスプレッド構文でサンプルコードを作り、試してみました。
質問3に関しては、なるほど、空文字の表現は何も書かないことで指定できるのですね。こちらも試して確認しました。
たくさんのことをご丁寧にご教示いただき、とても勉強になりました。
大変ありがとうございました。

[jun68ykt]

どういたしまして。
ご丁寧な返信、ありがとうございます。
参考になりましたようで、よかったです。

Answer 2

var str = "<div>要素1</div><div>要素2</div><div>要素3</div>";
var dummy=Object.assign(document.createElement('body'),{innerHTML:str});
console.log([...dummy.querySelectorAll('*')].map(x=>x.outerHTML));

Comments

[tkshp]

ご回答ありがとうございます。
DOMの作成方法をご教示いただき、ありがとうございます。
とても勉強になりました。ありがとうございます。