在将内容添加到 rangy 高亮 div 上方的 DOM 后,Rangy 计算反序列化位置

Rangy calculate deserialized positions after adding content to the DOM above the rangy highlightable div

我有一个 div 包含其他 div 元素和 text个元素。

我使用 Rangy Highlighter 来突出显示底部的文本 div。我使用 highlighter.highlightSelection("classApplier1") 突出显示所选文本。

结束网络会话后,我使用

存储应用于 div 的更改
  var serializedValue = highlighter.serialize("classApplier1");

打开新的网络会话(或按刷新)后,我使用

highlighter.deserialize(serializedValue);

再次获得亮点。

如果 html 源在不同的网络会话之间没有变化,这就像一个魅力。由于基础 div 集成在另一个网页中并且本身没有页面,因此可以在 html 源中的基础 div 上方(或下方)添加很多元素.这导致反序列化方法不再起作用,或者它基本上改变了高光,因为它的工作位置相对于 html 源中高光发生的位置发生变化。

序列化高亮值的示例如下所示

"type:textContent|394249$classApplier1$"

我需要能够根据基数 div 的位置更改存储的值(此处为 3942 和 3949)。(例如,如果网页更新,这可能会在网络会话之间发生变化)。

我如何以与 rangy 相同的方式获得 html 源中的基础 div 位置以及我应该如何根据该新位置计算新位置值

这是一个非常古老的问题,但我今天得到了一个支持,所以我正在回答我认为我已经解决的问题。

我遇到的问题是 html 中有一个文本,我需要找到该文本的第一个索引。这是我采取的方法:

1- 到达页面后,我突出显示了包含我的文本的整个 div(基础 div)。我将其序列化并在序列化字符串中说

"type:textContent|140049$classApplier1$"

包含基数(即 1400)。所以基本上我文本中的第一个字符是 html 中的字符 1400。所以 1400 成为我的基本整数。

2- 为了存储序列化字符串,我总是从中删除 1400(从头到尾),然后存储它。

所以在我的数据库中,如果我突出显示前 30 个字符。我会得到一个反序列化的字符串:

"type:textContent|140030$classApplier1$"

我会存储 (first:0 , last:30)

3- 在新的 html 源中检索存储的数字(来自数据库)后,我计算了新的 html 的基数(现在说它是 1450,因为我添加了另一个 javascript 文件引用) 最后将基数添加到检索到的存储数字(也添加到第一个和最后一个数字)

"type:textContent|145080$classApplier1$"

第一步中整个div的突出显示和"dehighlighting"发生得如此之快以至于用户看不到。