Rangy：创造一个新的亮点就是记住旧的亮点答案

【问题标题】：Rangy: Creating a new highlight is remembering the old highlightRangy：创造一个新的亮点就是记住旧的亮点
【发布时间】：2023-03-21 02:12:01
【问题描述】：

我正在使用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

【问题讨论】：

标签： javascript rangy

【解决方案1】：

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

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

highlighter.removeHighlights(highlighter.highlights);

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

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

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

【讨论】：

为什么我更新的小提琴不再工作了？我更新了库 URL，因为小提琴中的旧 URL 不再起作用。这是更新的小提琴jsfiddle.net/8pMEt/61

【解决方案2】：

我通过在每次highlightSelection 调用之前重新创建荧光笔解决了这个问题。我不知道为什么会这样，但是荧光笔必须存储一些关于以前的高光的数据，用于高光合并或其他东西。

我的问题中的代码可以改成如下解决问题：

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

//called on "Highlight" button click
highlighter = rangy.createHighlighter(document, "TextRange");
highlighter.addClassApplier(cssApplier);
highlighter.highlightSelection(highlightClassName, selection);

【讨论】：