javascript - シーケンシャル スパン インライン css を正規化する方法は?

Question

それは私が解こうとしているあいまいなナットであり、それを質問に入れようとすることさえ難しいので、私が持っているものと取得したいものを示すのが最善です:

<div>
  <span>A</span>
  <span style='font-weight:bold'>B</span>
  <span style='font-weight:bold;font-style:italic'>C</span>
  <span style='font-weight:bold'>B</span>
  <span style='font-style:italic'>C</span>
  <span>A</span>
</div>

これを次のように変換するアルゴリズムを考案しようとしています。

<div>
  A
  <span style='font-weight:bold'>
    B
    <span style='font-style:italic'>C</span>
    B
  </span>
  <span style='font-style:italic'>C</span>
  A
</div>

もちろん、これは単純化された例ですが、目標は、さまざまなインライン スタイルを持つ一連の連続したスパンを取得し、同じように表示されるより単純な結果に変換することです。私はこれに何日も費やし、興味をそそるほど近づいてきましたが、壊れたケースを常に見つけました. すべてのスタイルで動作する必要はありませんが、font-weight、font-style、color、font-size、および font-family が必要です。可能性が低いことはわかっていますが、誰かがすでにこのようなことを行っている場合、それがどのように私を苦痛の世界から救ってくれるかを知りたいです.

たとえば、2 つの要素の一般的なスタイルのオブジェクトを返す関数を作成しました。

cs = getCommonStyles([cn,c]);

cn と c はインライン スタイルを持つ span 要素で、cs は一般的なスタイルを含むオブジェクトです。この関数からの戻り値の例は次のとおりです。

{fontWeight:"bold", fontStyle:"italic"}

両方のスタイルが各要素に存在します。したがって、提案された回答は、そのような機能の使用を想定して歓迎されます。

更新: 上記は単なる例です。スタイルの組み合わせは任意であり、連続する入力スパンの数は数百に及ぶ可能性があります。HTMLはサーバーに送信され、データ量を削減しようとしています。