尝试在 Range 上使用 setStart 和 setEnd 时出错:未捕获的 IndexSizeError:无法在“Range"上执行“setEnd" [英] Erro when try use setStart and setEnd on Range: Uncaught IndexSizeError: Failed to execute 'setEnd' on 'Range'

问题描述

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

Uncaught IndexSizeError: Failed to execute 'setEnd' on 'Range': 偏移量 2 大于或等于节点的长度 (0).

这是我的脚本:

和页面:

<div style="background-color: black; color: white; padding: 20px;"id="divid2"><h2>伦敦</h2><p id="dividTeste1">伦敦是英格兰的首都.这是最英国人口众多的城市，大都市区为超过 1300 万居民.</p>
<div style="background-color: black; color: white; padding: 20px;"id="divid2"><h2>伦敦</h2><p id="dividTeste2">伦敦是英格兰的首都.这是最英国人口众多的城市，大都市区为超过 1300 万居民.</p>

<input type="button" value="Marcar com range" onClick="gotMark()"id="marcarconranger12"/>

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

解决方案

我用一行找到了错误的解决方案

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");*newNode.className = '高亮黄色';*range.surroundContents(newNode);}

现在选择已跨越

When I try to use a range, I get this error on the console:

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

Here is my script:

<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>

And page:

<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" />

I tried following the instructions from dom range.setStart / setEnd to select the start and end position.

解决方案

I found solution for erro with one line

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");
   *newNode.className = 'highlight-yellow';*

    range.surroundContents(newNode);
}

Now selection has been spaned

这篇关于尝试在 Range 上使用 setStart 和 setEnd 时出错:未捕获的 IndexSizeError:无法在“Range"上执行“setEnd"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！