How do I select (get range or selection object) an element in a contenteditable div if I know the element ID?

Question

I have this contenteditable element:

<div id="editMe" contenteditable="true">
     There is some text here.
     <span id="selectThisText">This is the target text.</span>
     And some here.
</div>

I want to use Javascript to select (get range object) the contents of #selectThisText. How do I get the range of the content in that element?

Thanks in advance!

score 10 · Accepted Answer · answered Nov 21 '13 at 16:26

10

Create a range and use its selectNodeContents() method.

var span = document.getElementById("selectThisText");
var range = document.createRange();
range.selectNodeContents(span);

This doesn't work in IE <= 8, which doesn't support DOM Range. However, this is one case which is just as easy in old IE:

var span = document.getElementById("selectThisText");
var textRange = document.body.createTextRange();
textRange.moveToElementText(span);

answered Nov 21 '13 at 16:26

Tim Down

318,141
75
454
536

thanks so much! I'm having some trouble with the code you provided. I tried it out (http://jsfiddle.net/Yyjr4/1/), but I'm not sure what's wrong. Edit: It actually works. I didn't realize at first because I was looking at the code incorrectly. It just gets the range of #selectThisText. It doesn't make the selection in #editMe. I am trying to figure this out on my own, but I would appreciate any help you can give me. – tundoopani Nov 22 '13 at 02:46
I think I figured it out: http://jsfiddle.net/Yyjr4/3/. I used `window.getSelection().addRange(range)` to make the selection on the page. Would this be the preferred way to do this? Thanks so much for your help. I can't thank you enough. – tundoopani Nov 22 '13 at 02:52
@tundoopani: Yes, that's right. I wasn't sure from the question whether you just wanted the range or whether you also wanted to select it. http://stackoverflow.com/questions/2044616/select-a-complete-table-with-javascript-to-be-copied-to-clipboard/2044793#2044793 – Tim Down Nov 22 '13 at 09:48
According to your answer to http://stackoverflow.com/questions/15813895/set-cursor-after-span-element-inside-contenteditable-div, Webkit will not select the parent node. Is that correct? It seems that the selection does not include the span tag, so if I replace the selection, the new content is placed inside the span element instead of replacing it completely. Is there any workaround this? Your help is very appreciated! – tundoopani Nov 24 '13 at 01:55
I tried to use `selectNode()` instead of `selectNodeContents` but replacement of the selection with new content does not replace the parent node. – tundoopani Nov 25 '13 at 02:05
@tundoopani: WebKit does store a modified version of a range when you select it because it only allows particular positions to be used as selection boundaries or caret positions. I don't know all the rules it uses. – Tim Down Nov 25 '13 at 09:34

score 1 · Answer 2 · edited Oct 24 '19 at 06:55

1

//get Selection
var selection = window.getSelection();

//get Range
var range = selection.getRangeAt(0); //where the range selection happens.

edited Oct 24 '19 at 06:55

Jeroen

1,168
1
12
24

answered Oct 24 '19 at 06:32

Smith Oscuro XAgent

11
1

score -3 · Answer 3 · answered Nov 21 '13 at 06:54

-3

var text = $('#selectThisText').text();

Demo: http://jsfiddle.net/5NBnP/

answered Nov 21 '13 at 06:54

ahren

16,803
5
50
70

How do I select (get range or selection object) an element in a contenteditable div if I know the element ID?

3 Answers3