如何在沒有子節點的contenteditable div中選擇文本范圍？

Question

我想在內容可編輯的div中選擇文本。 我想提供一個起始索引和一個結束索引。

例如，如果我有一個div：

<div id="main" contenteditable="true">
    Hello World
</div>

我想要一個函數來執行類似“selectText（'＃main'，6,10）”的操作，然后選擇將焦點設置為main並選擇“World”。

但是我在網上看到的所有例子都假設容器div有孩子。 但我的沒有孩子。 只是div中的文本。

這是我迄今為止嘗試過的無濟於事：

$('#main').focus();
var mainDiv = document.getElementById("main");
var startNode = mainDiv;
var endNode = mainDiv;

var range = document.createRange();
range.setStart(startNode, 6);
range.setEnd(endNode, 10);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

但是我明白了：Uncaught IndexSizeError：在'Range'上執行'setStart'失敗：偏移6處沒有子節點。

我的jsfiddle： http ： //jsfiddle.net/foreyez/h4bL5u4g/

Answer 1

但我的沒有孩子。 只是div中的文本。

div中的文本是一個孩子 - 它是一個文本節點。 這就是你想要的目標。

您還需要修剪其nodeValue以獲得正確的偏移量。 否則，將包括前導空格。

這似乎做你想要的：

 function SelectText(obj, start, stop) { var mainDiv = $(obj)[0], startNode = mainDiv.childNodes[0], endNode = mainDiv.childNodes[0]; startNode.nodeValue = startNode.nodeValue.trim(); var range = document.createRange(); range.setStart(startNode, start); range.setEnd(endNode, stop + 1); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } //SelectText $('#main').focus(); SelectText('#main', 6, 10); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main" contenteditable="true"> Hello World </div>