Javascript - 选择 - 识别文本节点答案

【问题标题】：Javascript - selection - identify text nodeJavascript - 选择 - 识别文本节点
【发布时间】：2013-10-22 04:21:07
【问题描述】：

我正在使用 Javascript 选择方法，并且即使在刷新页面后也希望保存用户的选择。我为页面上的每个 html 元素添加了一个唯一的 ID。用户选择后，我保存 anchorNode id、focusNode 和偏移量。然后我想使用 Range 和 Selection 类恢复选择。问题是：例如，如果有

<div id="u1">hello <i id="u2">italic</i> word!</div>

并且用户选择了llo italic wor，anchorOffset 将为 2，focusOffset 将为 3，因为我们在 div 内有 3 个文本节点。那么，如何确定文本节点呢？我将拥有 u1 id（父 id），但如何知道偏移量属于哪个文本节点？谢谢。

【问题讨论】：

标签： javascript selection

【解决方案1】：

您可以使用我的Rangy 库中的Serializer module，或者它使用的方法，文档中对此进行了说明。有点像XPath。

【讨论】：

不，我不能......因为当用户不在时，文本可能会被更改......在这种情况下，所有序列化程序数据都会被破坏（因为 DOM 将是另一个）
@Volodymyr：好的。那么在保存和恢复选择之间可以改变和不能改变什么？
我可以保存父标签的id和偏移量。例如，如果结构是
一些小文本
，我可以保存baseId u1，baseOffset - 用户选择的开始，focusId - u1，focusOffset - 用户选择的结束。然后使用这 4 个值，我可以创建一个 Selection 对象并使用 Rangy Highlighter 插件突出显示选择。但是，如果标签具有我的问题中显示的结构，它就不起作用，因为它有 3 个 textNode，我不知道如何确定使用哪个 textNode...
我不会阅读你的随机库文档，而不是你在这里解释它。很简单的问
@neaumusic：文档链接已经过时，所以我现在已经修复了。解释图书馆如何工作的细节的地方是图书馆的文档。从它复制和粘贴对我来说似乎是多余的。

【解决方案2】：

如果父div中的文本节点，我们可以确定位置 selectedText - Selection 类的实例

 var selectedStartNodeText = selectedText.anchorNode.textContent;
 var startTextNodeId = 0;
 $.each(selectedText.anchorNode.parentNode.childNodes, function(i, n){
        if(n.textContent == selectedStartNodeText) {
                startTextNodeId = i;
        }
 });

【讨论】：