javascript - 尝试在范围 : Uncaught IndexSizeError: Failed to execute 'setEnd' on 'Range' 上使用 setStart 和 setEnd 时出错

Question

当我尝试使用范围时，我在控制台中收到此错误:

Uncaught IndexSizeError: Failed to execute 'setEnd' on 'Range': The offset 2 is larger than or equal to the node's length (0).

这是我的脚本:

<script type="text/javascript">
    function gotMark() {
        var range = document.createRange();
        var startNode = document.getElementById("dividTeste1").firstChild;

        range.setStart(startNode, 0);
        range.setEnd(startNode, 2);

        var newNode = document.createElement("span");
        range.surroundContents(newNode);
    }
</script>

和页面:

<div class="ui-block-a" id="divid" value="div1">
    <div style="background-color: black; color: white; padding: 20px;" id="divid2">
        <h2>London</h2>
        <p id="dividTeste1">London is the capital city of England. It is the most
            populous city in the United Kingdom, with a metropolitan area of
            over 13 million inhabitants.</p>
    </div>
        
    <div style="background-color: black; color: white; padding: 20px;" id="divid2">
        <h2>London</h2>
        <p id="dividTeste2">London is the capital city of England. It is the most
            populous city in the United Kingdom, with a metropolitan area of
            over 13 million inhabitants.</p>
    </div>
</div>
<input type="button" value="Marcar com range" onClick="gotMark()"
        id="marcarconranger12" />

我尝试按照 dom range.setStart / setEnd 中的说明进行操作选择开始和结束位置。

Answer 1

虽然 OP 的代码似乎是安全且有界限的，但在同一节点上进行多次操作时经常会出现问题，这会改变其特性并抛出您可能进行的后续偏移计算。
例如，假设我们想在一个开始-结束对数组的段落中添加高亮。天真的方法是在对上向前迭代并为每个开始-结束范围执行插入:

const highlightPositions = (textEl, positions) =>
  positions.forEach(([start, end]) => {
    const range = document.createRange();
    range.setStart(textEl.firstChild, start);
    range.setEnd(textEl.firstChild, end);
    const span = document.createElement("span");
    span.style.background = "#0f6";
    range.surroundContents(span);
  })
;

const positions = [[0, 3], [8, 11]];
highlightPositions(document.querySelector("p"), positions);

<p>foo bar baz</p>

这里的修复是确保位置是排序的并且不重叠，然后向后迭代，以便当节点的内容发生变化时，内容中较早的索引偏移量不会受到影响。

const highlightPositions = (textEl, positions) =>
  positions.slice().reverse().forEach(([start, end]) => {
    const range = document.createRange();
    range.setStart(textEl.firstChild, start);
    range.setEnd(textEl.firstChild, end);
    const span = document.createElement("span");
    span.style.background = "#0f6";
    range.surroundContents(span);
  })
;

const positions = [[0, 3], [8, 11]];
highlightPositions(document.querySelector("p"), positions);

<p>foo bar baz</p>

当计算跨越多个节点的偏移量时，也会出现这个问题。确保偏移量对于作为范围的第一个参数给出的节点是本地的。
还有许多其他策略可以避免该问题，包括 Node.normalize() 将子文本粘合在一起，在新节点或字符串上构建所需文本并设置 .innerHTML当它准备好时，等等。