Nuxt をフロントエンドとして使用して、ヘッドレス WordPress ウェブサイトを開発しています。
この Web サイトにはショートコードを含む記事が数千件あります。すべてのページデータをgraphql経由で取得し、v-htmlを使用してコンテンツをレンダリングすると、すべて問題ありませんが、ショートコードは明らかにプレーンテキストとしてのみレンダリングされます。
それらのほとんどは非常に単純なショートコードなので、それらを置き換える Vue コンポーネントを作成します
リーリー私が行う必要があるのは、HTML をオブジェクトの配列に分割し、その配列に応じてページの一部を HTML またはコンポーネントにレンダリングするために使用できるようにすることです。
これを行う最善の方法は正規表現を使用することだと思いますが、ここが私が混乱しているところです。
次の HTML といくつかのショートコードがあるとします。
リーリー私がやりたいのは、以下に示すようにオブジェクトの配列を返すことです
リーリーこれは必要なもののベースであり、プロパティなどを取得することでショートコードをさらに細分化できます。
この問題を解決する最善の方法は何ですか?正規表現が最善のアプローチでしょうか?
P粉7148447432023-09-09 09:21:27
DOM パーサーを使用して、DOM の最上位要素を反復処理できます。そのような要素がテキスト ノードであり、ショートコード形式である場合は、出力配列に別のオブジェクトを作成します。それ以外の場合は、要素の HTML を反復処理して、ショートコードでない場合は蓄積し、最終的にオブジェクトとして出力します。 :