如何在没有子节点的 contenteditable div 中选择文本范围？答案

【问题标题】：How to select text range within a contenteditable div that has no child nodes?如何在没有子节点的 contenteditable div 中选择文本范围？
【发布时间】：2015-11-11 19:45:36
【问题描述】：

我想在内容可编辑的 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);

但我得到：未捕获的 IndexSizeError：无法在“范围”上执行“setStart”：偏移量 6 处没有子项。

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

【问题讨论】：

innerText 方法有帮助吗？

标签： javascript html

【解决方案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>

【讨论】：