javascript - 使用不同的 CSS 对重叠的 HTML 跨度进行建模

Question

我正在寻找一种对跟踪不同重叠 CSS 组的东西进行建模的好方法，类似于以下内容：

1. 这只是一个示例的测试句。
2. （这）只是一个（测试句）的例子。
3. （这只是）一个测试（例如句子。）

根据选择的单选按钮，我想为括号中的每个组启用不同的 CSS 样式。例如，对于#2，(This is) 将始终具有不同的默认样式，并且在鼠标悬停时会突出显示红色，但仅在选择选项 2 时。会有很多不同的选项，所以我想避免在必要时拥有源文本的多个副本。

问题是你不能有跨度重叠。我能做到这一点的唯一方法是为每个单词提供多个 css 类，例如：

group2_word1,group3_word1, etc...，然后做很多 javascript 编码来模拟我想要的行为。这对我来说听起来是个可怕的主意。

有没有更好的办法？

Answer 1

我记得一个 javascript 库，它能够进行基于单词/字母的内联文本样式，但我不记得名字了。我现在能找到的只是一个名为rangy的库。也许你想试一试。我也会尝试找到另一个库，如果我找到它会报告。

看看CSSClassApplierModule可以做你正在寻找的东西。