[SOLVED] How can I save and restore Selection range in javascript?


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.


  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 id="content">
        <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.

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?

Range class, Selection class


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

Answered By – Neil Galiaskarov

Answer Checked By – Katrina (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *