javascript - 当我只知道字符偏移量时如何创建范围对象？

Question

所以我有一个包含文本 block 的 div，之前用户已经在这个 block 中选择了一些文本，我从这个选择中创建了一个范围对象。我存储了所选文本的起点和终点的偏移量，但我在重新创建范围时遇到了问题(因此我可以对其进行操作)。 “quotables”是包含所有文本的 div。我不知道我做错了什么。

    var theRange = rangy.createRange();
    var node = $('.quotables').html();
    theRange.setStart(node, 14);
    theRange.setEnd(node, 318);

但我不断收到错误: Uncaught Error :NOT_FOUND_ERR:DOM 异常 8
m.setStart
(匿名函数)
d.extend._Deferred.f.resolveWith
d.d.extend.ready
d.c.addEventListener.y

Answer 1

范围边界不是 HTML 字符串表示中的字符偏移量。相反，它是 DOM 节点内的偏移量。例如，如果节点是文本节点，则边界表示为节点文本中的字符偏移量。如果该节点是一个元素，则表示为该节点在边界之前的子节点数。例如，在下面的 HTML 中，有一个边界由 | 表示的范围。 :

<div id="test">foo|bar<br>|<br></div>

...范围的起始边界位于文本节点中的偏移量 3，该文本节点是 <div> 的第一个子节点元素，而结束边界位于 <div> 内的偏移量 2 处，因为边界之前有两个子节点(文本节点“foobar”和一个 <br> 元素)。您将按如下方式以编程方式创建范围:

var range = rangy.createRange(); // document.createRange() if not using Rangy
var div = document.getElementById("test");
range.setStart(div.firstChild, 3);
range.setEnd(div, 2);