如何保存和恢复 javascript 中的选择范围？

Question

I want to save (serialize) the Selection range in order to reuse (deserialize) it in the next user session in my UIWebView of iOS app .

Userpath :

1. User selects the part of the text, click save
2. Closes the built-in mobile browser
3. Opens the built-in mobile browser and sees the restored selection.

My idea is firstly get the range by calling window.getSelection().getRangeAt(0) and then save its startContainer , endContainer properties. Check the following demo snippet:

 function saveSelectedRange() { var highlightRange = window.getSelection().getRangeAt(0); var range = document.createRange(); //??? console.log("start container: " + JSON.stringify(highlightRange.startContainer)); console.log("end container: " + JSON.stringify(highlightRange.endContainer)); }

 #intro { font-size: 125%; color: green; } p.small { font-size: 75%; } #content { margin-left: 330px; } #buttons { left: 10px; position: fixed; border: solid black 1px; background-color: background:#C0ED72; padding: 5px; width: 300px; } html.ie6 #buttons { position: absolute; } #buttons h3 { font-size: 125%; font-weight: bold; margin: 0; padding: 0.25em 0; }

 <div id="buttons"> <h3>Save selection range</h3> <p>Make a selection in the document and use the button below to save the selection range </p> <input type="button" ontouchstart="saveSelectedRange();" onclick="saveSelectedRange();" value="Save selection range"> </div> <div id="content"> <h1>Demo</h1> <p id="intro"> Please use your mouse to make selections from the sample content and use the button on the left to save the selection range. </p> </div>

As you see, console logs empty startContainer , endContainer values, but startOffset , endOffset properties are ok. What values need I to save to be able to restore the selection range in further sessions? What are common ways to achieve it?

Ref: Range class , Selection class

Answer 1

I have finally solved it by using @TimDown rangy-library and his module .

var highlightRange = window.getSelection().getRangeAt(0);
var serializedRange = rangy.serializeRange(highlightRange);
var deseriazedRange = rangy.deserializeRange(serializedRange);

Important Note: Rangy library creates own RangyRange class in order to be cross-platformed (I guess), if you want to use methods from DOM Range class, some of them wont be available, until you setup the rangy to use Native Range

Answer 2

You can also do it with JavaScript:

var range;
document.addEventListener("selectionchange", function() {
    var selection = document.getSelection();
    range = selection.getRangeAt(0);
});

function onClick() {
  alert( range.toString() );
  
  window.getSelection().removeAllRanges();
  document.getSelection().addRange(range)
}