Javascript Firefox和IE中的选择对象有问题

我有一些javascript，会弄乱选择。完整的代码做了一些我现在不想讨论的复杂事情，但是我有一个小的测试用例，我在这里不理解。如果加载此页面，您将看到一些文本和两个按钮

双击一些以选择它，然后单击选择。有些在它周围有一个跨度，然后变成灰色。 然后再次双击一些并点击取消选择。跨距消失了，看着页面内容，它看起来又回到了最初的样子。 最后双击某个按钮，点击选择按钮，不选择任何内容。 最后一步失败，因为选择的开始和结束被报告为位于页面上的不同节点中，即使它看起来确实像同一个节点，并且报告为位于两个节点的位置0。我不明白为什么它的行为与步骤1不同，因为在我看来，步骤2使页面与步骤1之前一样。在那之后事情变得更奇怪了。IE9中也有类似但不完全相同的怪异行为。镀铬的就可以了

有人知道发生了什么吗？为什么在步骤3中有两个不同的文本节点？为什么两个选择的偏移量都是0，而选择似乎从0延伸到5，如步骤1中所示

这段代码还有一些其他错误，例如尝试进行多项选择失败，许多其他事情都不起作用，但我只是想从这个角度来理解这个案例：

一些测试词 选择 不选择 函数日志消息 { var log=document.getElementByIdlog； log.innerHTML+=消息+； } 功能日志选择选择 { 变量范围=selection.getRangeAt0； var startContainer=范围.startContainer； var endContainer=range.endContainer； 日志节点类型：+startContainer.nodeType+，+endContainer.nodeType+，+range.commonAncestorContainer.nodeType logstartContainer:+startContainer.nodeType==3？startContainer.wholeText:startContainer.innerHTML； logendContainer:+endContainer.nodeType==3？endContainer.wholeText:endContainer.innerHTML； logcommonAncestorContainer:+range.commonAncestorContainer.nodeType==3？range.commonAncestorContainer.wholeText:Escaperage.commonAncestorContainer.innerHTML； logequal:+startContainer==endContainer； logstart:+range.startOffset+end:+range.endOffset； } 功能选择 { var selection=window.getSelection； 变量范围=selection.getRangeAt0； var start=范围.STARTOFSET； var end=range.endOffset； var startContainer=范围.startContainer； var endContainer=range.endContainer； 日志选择选举； startContainer.parentNode.innerHTML=startContainer.wholeText.substring0，开始 + +startContainer.wholeText.Substring开始、结束 + +startContainer.wholeText.substringend，startContainer.wholeText.length； selection.removeAllRanges； 日志 } 函数取消选择 { var selection=window.getSelection； 日志选择选举； selection.removeAllRanges； var textDiv=$text； logstart:+escapetextDiv.html； textDiv.findspan.eachfunction{ var$span=$this $span.replace为$span.html； }; logfinal:+escapetextDiv.html； 日志 }

---

Chrome调试器可以清楚地显示您的假设出错的地方：

在采取任何操作之前，这是DOM：

选择后，以下是您的脚本如何更改它：

最后，在取消选择之后：

最后的显示揭示了问题：您没有连接字符串值节点，而是创建了一个新节点。父节点包含两个文本节点，因此您的选择将跨越它们

需要说明的是，您的脚本存在以下问题：

textDiv.find("span").each(function () {
    var $span = $(this)
    $span.replaceWith($span.html());
});

---

用span的html字符串替换span是创建新文本节点的原因。

我只需执行所有三个步骤。在最后一步中，当我单击“选择一些”时，它再次变为灰色。浏览器：Chrome，版本：43.0.2357.81