Javascript，如何重新创建选择/范围？

Question

在 javascript 中:我需要抓取一个网页选择，然后稍后重新创建准确的选择。

我这样做如下。这在向前创建原始选择时起作用，但在通过向后/向上移动鼠标进行原始选择时不起作用。它不会抛出错误，但未选择任何内容。在这种情况下，我需要切换 setStart() 和 setEnd() 的参数。

我怎么知道我需要这样做？原始选择是向后的还是一个节点在另一个节点之后/之前？

编辑:我想使用纯 js，没有额外的库

编辑 2:我不需要它在旧 IE 中工作。 IE9+ 没问题。

// **** user makes selection

// **** get selection and range ****

var selection = window.getSelection(); 

var startNode = selection.anchorNode;
var endNode = selection.focusNode;

var startOffset = selection.anchorOffset;
var endOffset = selection.focusOffset;

// **** do stuff where selection is lost *****

// **** recreate selection as it was ****

var range = document.createRange();

range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

selection.removeAllRanges(); 
selection.addRange(range);  // works except when original selection was backwards

Answer 1

使用 rangy.js您可以轻松保存和恢复选择

Live Demo

var savedSel = rangy.saveSelection();

//Selection is lost

rangy.restoreSelection(savedSel);

source