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

Question

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

1. 这只是一个例子的测试句。
2. (This is) 只是一个(测试句)的例子。
3. (This is just) a test (sentence for example.)

根据选择的单选按钮，我想为括号中的每个组启用不同的 CSS 样式。 So for #2 for example, (This is) will always have a different default style, and will highlight red when moused over, but only when option 2 is selected.会有很多不同的选择，所以我想在必要时避免拥有源文本的多个副本。

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

group2_word1、group3_word1 等...，然后进行大量 javascript 编码以模拟我想要的行为。这对我来说是个糟糕的主意。

有没有更好的办法？

Answer 1

我记得有一个 javascript 库能够进行基于单词/字母的内联文本样式设置，但我不记得它的名字了。我现在能找到的只是一个名为 rangy 的库.也许您想尝试一下。我也会尝试找到其他库并在找到后报告。

看看 CSSClassApplierModule这可以满足您的需求。