使用setsrat和setEnd选择部分文本

selecting partial text with setsrat and setEnd

本文关键字：文本 选择部 setEnd setsrat 使用      更新时间：2023-09-26

我正试图从这个小提琴中的文本中选择文本somehttp://jsfiddle.net/vZ2fF/但它似乎根本不起作用。。。我做错了什么？？？

<div contenteditable="true">
    <p id="ul1">
        <span id="span1">some element</span>
        <span>some element2</span>
    </p>
</div>


var selection1= window.getSelection();
var range1=document.createRange();
var ul= document.getElementById("ul1");
var idspan=document.getElementById("span1");
range1.setStart(idspan, 0);
range1.setEnd(idspan, 5);
selection1.addRange(range1);

jsBin演示

var Win = window, Doc = document;
var selection1 = Win.getSelection ? Win.getSelection() : Doc.selection.createRange();
var range = Doc.createRange();
function El(id){ return Doc.getElementById(id); }
var ul = El("ul1");
var idspan = El("span1").firstChild; // Note the Node element
range.setStart(idspan, 0);
range.setEnd(idspan, 4);
selection1.addRange(range);

http://www.quirksmode.org/dom/range_intro.html
https://developer.mozilla.org/en-US/docs/Web/API/range.setStart
https://developer.mozilla.org/en-US/docs/Web/API/range.setEnd
https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-范围设置启动

这是因为，setEnd的第二个参数endOffset是endNode开始之间的子节点数。

因此，您的idspan只有一个子节点textnode。因此它不适用于range1.setEnd(idspan,5)。为此，您需要有5个子元素。

这将起作用：range1.setEnd(idspan,1)，因为idspan中的子节点数量只有一个（即文本节点）。

相关文章：