6

我有以下代码选择元素的全部内容：

function selectElement(element) {
    var sel = window.getSelection();
    sel.removeAllRanges();
    var range = document.createRange();
    range.setStart(element, 0);
    range.setEnd(element, 1);
    sel.addRange(range);
    console.log(range);
}

我打电话给：

selectElement(document.getElementById("input"));

如果#input看起来像这样：

<div id="input">
Lorem Ipsum Dolor Sit
</div>

如何选择字符0-7，以便选择：

<div id="input">
[Lorem I]psum Dolor Sit
</div>

我认为设置setStartandsetEnd会起作用，但我只能从0-1.

我可以选择节点内的文本，而不是节点本身吗？

4

3 回答 3

4

您将整个 div 节点传递给setStart/ setEnd，这就是为什么您只能在 0 和 1 之间进行选择。您必须传递 divfirstChild节点，它是一个文本节点。例如，要选择“Ipsum”：

range.setStart(element.firstChild, 7);
range.setEnd(element.firstChild, 12);

http://jsfiddle.net/JJ86n/

注意：处理跨浏览器的范围一直是一团糟。我已经有一段时间没有处理它了，但上次我检查了一下，让像rangy这样的库来处理令人讨厌的细节似乎是个好主意。

于 2013-03-01T18:14:18.160 回答
2

您需要从元素内的文本节点中选择它。

range.setStart(element.childNodes[0], 0);
range.setEnd(element.childNodes[0], 7);
于 2013-03-01T18:14:17.100 回答
0

您正在处理整个元素，它是一个具有不同对象作为属性的对象。要处理字符串，您必须首先获取 String(text) 子元素。您可以通过从元素子节点数组中获取子节点来做到这一点。尝试直接在 Selection 对象上使用 JavaScript 字符串属性或方法（如 length 或 substr）如果没有该属性或方法将导致错误，如果有，则可能返回意外结果。

于 2013-03-01T18:28:20.070 回答