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

Issue

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

Solution

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 *