javascript - Rangy:创造新的亮点就是记住旧的亮点

Question

我正在使用 highlighter module in Rangy .

我有一个 div 元素，它有一些 html。 html 实际上是使用 ajax 从文件加载的，我有一个执行此加载的按钮。

加载文本后，我可以选择显示的 html 的一部分，然后按“突出显示”按钮。这会调用一些 Rangy 代码并根据需要突出显示文本...

//called on document load
rangy.init();
cssApplier = rangy.createCssClassApplier(highlightClassName, { normalize: true });
highlighter = rangy.createHighlighter(document, "TextRange");
highlighter.addClassApplier(cssApplier);

//called on "Highlight" button click
highlighter.highlightSelection(highlightClassName, selection);

为了复制的目的，请选择较大的部分作为第一次突出显示。

接下来，我单击加载 html 按钮以重新加载 html。正如预期的那样，亮点消失了。但现在我选择了另一段文本，它恰好与我所做的第一个突出显示重叠。现在，当我按下“突出显示”按钮时，由于某种原因，突出显示是前一个突出显示的。为什么会这样？

我知道一定与合并有关，但我不明白为什么。当我调试 JS 时，我可以看到选择(来自 rangy.getSelection())是我期望的。

Here is a JSFiddle replication of the problem

Answer 1

发生这种情况的原因是因为每个高亮显示都作为一对字符偏移存在，而不是对 DOM 中的实际范围的引用，这意味着当 DOM 的某些部分被替换时，现有的高亮显示仍然幸福地不知道并继续假设它们应用于原始字符范围。

您的解决方法很好。另一种方法是调用荧光笔的 removeHighlights() 方法:

highlighter.removeHighlights(highlighter.highlights);

演示:http://jsfiddle.net/8pMEt/1/

我将添加一个 removeAllHighlights() 方法来做同样的事情。

文档没有明确说明的一件事是，突出显示旨在用于静态 DOM，或者至少是文本内容不变的 DOM。在创建高光后更改 DOM 显然会导致字符偏移消失，整个事情都会失败。