【JavaScript】splitでhtmlタグを開始タグ、中身、終了タグで分割したい

Question

前提・実現したいこと

<p>text</p>の値を下記のように開始タグ、中身、終了タグで分割して配列に格納したいです。

[ "<p>", "text", "</p>" ]

タグの中にタグ（下記例）のパターンにも対応したいです。
<p>text<span>inner</span></p>

なので、このような書き方で実現をしてみました。
split((/(?=\<)|(?<=\>)/g))

発生している問題・エラーメッセージ

上記の方法で無事思い通りの結果になったのですが、なぜかスマホだと、この記述があるだけでjsが実行されなくなってしまいます。
この記述をしている関数を実行していないのに、動かないです。

webpackのbableのコンパイルが悪いのかと思ったのですが、この環境を変えることは現状不可能なので、
split((/(?=\<)|(?<=\>)/g))以外にhtmlタグを分割して配列に格納する方法はないでしょうか？

正規表現の書き方を変える、split以外の方法を使う、など、、、

補足

どの部分のせいで動かないのか検証してみると、(?<=\>)の記述のせいであることが分かりました。
これがないとスマホでも動きます。

Comments

[jun68ykt]

正規表現を使わない方法も回答としてアリでしょうか？

Answer 1

String.prototype.split

var string = '<p>text<span>inner</span></p>';

console.log(string.split(/(<[^>]*>)/));                               // ["", "<p>", "text", "<span>", "inner", "</span>", "", "</p>", ""]
console.log(string.split(/(<[^>]*>)/).filter(token => token.length)); // ["<p>", "text", "<span>", "inner", "</span>", "</p>"]

String.prototype.match

var string = '<p>text<span>inner</span></p>';

console.log(string.match(/<[^>]*>|[^<>]+/g)); // ["<p>", "text", "<span>", "inner", "</span>", "</p>"]

Re: dadada-dadada さん

Comments

[退会済みユーザー]

思い通りの挙動になりました。ありがとうございました。

Answer 2

正規表現の(?<=...)と言う記法はRegExp Lookbehind Assertionsと言われるのもで、ES2018から追加されたものです。現在の所、モダンブラウザであってもGoogle Chromeを始めとしたChromiumベースブラウザしか対応しておらず、Babelでの変換もできません。
RegExp Lookbehind Assertions - ECMAScript 2016+ compatibility table

SafariやFirefoxが対応するまで待つ(EdgeはChromiumベース版が現在ベータ版で2020年1月15日にリリース予定)のは現実的では無いようであれば、一つの正規表現によるsplitは諦めて、別の方法を考えた方が良いと思います。

Comments

[退会済みユーザー]

スマホだと動かないちゃんとした理由があったのですね。とても勉強になりました。ありがとうございました。