javascript - 段落内の重複する文字列

Question

私が次のようなテキストを持っているとしましょう：

<p>There are many people in Asia.</p>

many people、、の2つの文字列を一致させたいpeople in Asia。両方の文字列が個別に検出されたように出力を表示したいのですが、一致する各文字列に異なる色の下線を適用すると、次のようになります。

しかし、HTMLでは、これを試した場合、スパンをオーバーラップさせることはできません。

span.first { border-bottom: 1px solid red; }
span.second { border-bottom: 1px solid blue; }

<p>There are 
    <span class="first">many <span class="second">people</span> in Asia</span>.
</p>

最初</span>は閉じspan.secondます。

私の考えはdiv、テキストの下にsを配置して、上記の一致するテキストと一致するpようにすることですが、CSSを使用して、これらのdivを一致する文字列の開始位置と終了位置に揃えることは悪夢です。

これを行う方法について何か考えはありますか？

Answer 1

おそらく、すべての単語を独自の個別のspan要素に入れてから、クラスを使用してそれらを適切にスタイル設定することができます。一部のスパンには、下線が重なる複数のクラスがあります。冗長で醜いマークアップのようなものですが、それで問題は解決すると思います。

Answer 2

オーバーラップコンポーネントを個別にマークアップできます。例：

<p>There are
  <span class="first">many </span>
  <span class="overlap">people</span>
  <span class="second"> in Asia</span>. 
</p>

Answer 3

あなたはこれを行うことができます：

<p>There are
  <span class="first">many <span class="second">people</span></span>
  <span class="second">in Asia</span>. 
</p>

他の2つのソリューションほどきれいではありませんが、元の例と同じようにスタイルを設定します。

Answer 4

HTML：

 <p>There are
        <span class="first">many </span>
        <span class="second">people</span> 
        in Asia.
    </p>

CSS：

span.first { border-bottom: 1px solid red; }
span.second { border-bottom: 1px solid blue; }