javascript - How to select text range within a contenteditable div that has no child nodes? - Stack Overflow

admin管理员组

文章数量:1377503

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: /

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/foreyez/h4bL5u4g/

• javascript
• html

Share Improve this question Follow edited Nov 11, 2015 at 20:15 Shai UI asked Nov 11, 2015 at 19:45 Shai UIShai UI 52k7777 gold badges218218 silver badges316316 bronze badges 1

• would innerText method help ? – runtimeZero Commented Nov 11, 2015 at 19:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" contenteditable="true">
  Hello World
</div>

本文标签： javascriptHow to select text range within a contenteditable div that has no child nodesStack Overflow