Nuxt をフロントエンドとして使用して、ヘッドレス WordPress ウェブサイトを開発しています。

この Web サイトにはショートコードを含む記事が数千件あります。すべてのページデータをgraphql経由で取得し、v-htmlを使用してコンテンツをレンダリングすると、すべて問題ありませんが、ショートコードは明らかにプレーンテキストとしてのみレンダリングされます。

それらのほとんどは非常に単純なショートコードなので、それらを置き換える Vue コンポーネントを作成します

私が行う必要があるのは、HTML をオブジェクトの配列に分割し、その配列に応じてページの一部を HTML またはコンポーネントにレンダリングするために使用できるようにすることです。

これを行う最善の方法は正規表現を使用することだと思いますが、ここが私が混乱しているところです。

次の HTML といくつかのショートコードがあるとします。

私がやりたいのは、以下に示すようにオブジェクトの配列を返すことです

これは必要なもののベースであり、プロパティなどを取得することでショートコードをさらに細分化できます。

この問題を解決する最善の方法は何ですか?正規表現が最善のアプローチでしょうか?