Question

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

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

Answer 1

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

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

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

Answer 2

<强> jsBin demo

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

使用setsrat和setEnd选择部分文本

2 个答案: