こんにちは。以下のようにしてみると、いかがでしょうか?
javascript
1var str = "<div>要素1</div><div>要素2</div><div>要素3</div>";
2
3var parser = new DOMParser();
4var doc = parser.parseFromString(str, "text/html");
5var divs = doc.querySelectorAll("div");
6var divStrings = [...divs].map(e => e.outerHTML);
7
8console.log(divStrings); // => ["<div>要素1</div>", "<div>要素2</div>", "<div>要素3</div>"]
もしくは、正規表現を使ってもできます。
javascript
1var str = "<div>要素1</div><div>要素2</div><div>要素3</div>";
2
3var divs = str.split(/(?<=</div>)\s*/);
4
5console.log(divs); // => ["<div>要素1</div>", "<div>要素2</div>", "<div>要素3</div>"]
追記
コメントから頂きました質問に回答します。
質問 1
・質問1。
親要素にdivがなく、divが3個並列に並んでいるものは、DOMではないと思っていたのですが、
parseできているので、divが3個並列に並んでいるものもDOMになるということでしょうか?
「divが3個並列に並んでいるものもDOMになる」
という解釈よりは、
「divが3個並列に並んでいる文字列でもDOMParserはparseしてくれて、(ドキュメントノードをルートとする、) DOMツリーを構築してくれる。」
という解釈のほうがより正確です。
ついては、
javascript
1var str = "<div>要素1</div><div>要素2</div><div>要素3</div>";
2
3var parser = new DOMParser();
4var 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の該当ページです。
質問 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*
は不要で、以下
javascript
1var divs = str.split(/(?<=</div>)/);
で、意図した結果になります。