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

Question

我想保存（序列化） Selection范围，以便在我的UIWebView应用程序的 UIWebView 中的下一个用户 session 中重用（反序列化）它。

用户路径：

1. 用户选择部分文字，点击保存
2. 关闭内置的移动浏览器
3. 打开内置的移动浏览器并看到恢复的选择。

我的想法是首先通过调用window.getSelection().getRangeAt(0)获取范围，然后保存其startContainer 、 endContainer属性。 检查以下演示片段：

 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>

如您所见，控制台记录空的startContainer 、 endContainer值，但startOffset 、 endOffset属性没问题。 我需要保存哪些值才能在以后的会话中恢复选择范围？ 实现它的常用方法是什么？

参考：范围 class ，选择 class

Answer 1

我终于通过使用@TimDown rangy-library和他的模块解决了它。

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

重要提示： Rangy 库创建了自己的RangyRange类以实现跨平台（我猜），如果您想使用DOM Range类中的方法，其中一些方法将不可用，直到您将rangy设置为使用Native Range

Answer 2

您也可以使用 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)
}