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

Question

In javascript: I need to grab a webpage selection, and then recreate the exact selection later.

I do this as below. This works when the original selected is created forwards, but not when the original selection is made by moving the mouse backwards/up. It does not throw an error, but nothing is selected. In this case, I need to switch the parameters for setStart() and setEnd().

How do I know that I need to do this? That the original selection was backwards or that one node comes after/before the other?

EDIT: I'd like to use plain js, no extra libraries

EDIT 2: I do not need this to work in old IE. IE9+ is fine.

// **** 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

Using rangy.js you can save and restore selections easily

Live Demo

var savedSel = rangy.saveSelection();

//Selection is lost

rangy.restoreSelection(savedSel);

source

Answer 2

It looks like I need:

x = startNode.compareDocumentPosition(endNode);

if (x == 4 || (x==0 && startOffset < endOffset)){
    range.setStart(startNode, startOffset);
    range.setEnd(endNode, endOffset);
}else{
     range.setStart(endNode, endOffset);
     range.setEnd(startNode, startOffset);
}

I don't think this works in older browsers, but it's fine for me.