如何在没有子节点的 contenteditable div 中选择文本范围? [英] How to select text range within a contenteditable div that has no child nodes?

问题描述

我想在内容可编辑的 div 中选择文本.我想提供一个开始索引和一个结束索引.

例如，如果我有一个 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:无法在Range"上执行setStart":偏移量 6 处没有子项.

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

解决方案

但是我的没有孩子.只是 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, 停止 + 1);var sel = window.getSelection();sel.removeAllRanges();sel.addRange(range);}//选择文本$('#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">你好，世界

I'd like to select text within a content editable div. I'd like to provide a start index and an end index.

For example if I have a div:

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

I'd like a function to do something like "selectText('#main',6,10)" and it would select set the focus to main and select "World".

But all the examples that I see online assume that the container div has children. But mine don't have any children. Just the text within the div.

This is what I've tried so far to no avail:

$('#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);

But I get: Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': There is no child at offset 6.

My jsfiddle: http://jsfiddle.net/foreyez/h4bL5u4g/

解决方案

But mine don't have any children. Just the text within the div.

The text within the div is a child – it's a text node. That's what you want to target.

You will also need to trim its nodeValue to get the proper offset. Otherwise, the leading spaces will be included.

This seems to do what you want:

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>

这篇关于如何在没有子节点的 contenteditable div 中选择文本范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！