使用不同的CSS建模重叠的HTML跨度

Question

我正在寻找一种很好的方法来模拟跟踪不同重叠CSS组的内容，类似于以下内容：

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

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

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

group2_word1，group3_word1等等，然后做了很多javascript编码来模拟我想要的行为。这对我来说听起来很糟糕。

有更好的方法吗？

Answer 1

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

看一下CSSClassApplierModule，它可以做你正在寻找的东西。