javascript - 段落中的重叠字符串

Question

假设我有这样的文字:

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

我想匹配两个字符串:many people , 和 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 元素中，然后使用类来适本地设置它们的样式。一些跨度将有多个类，其中下划线重叠。有点冗长和丑陋的标记，但我认为它会解决你的问题。