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

javascript set selection
window set selection
get position of selected text javascript
javascript range object
contenteditable selection
movetoelementtext
node-range
selection empty

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!


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);

Selection and Range, JavaScript can get the existing selection, select/deselect both as a whole or partially The underlying Range and Selection objects are easy to grasp, and then you'll If the parent node is an element node, then the offset is a child number, p id = " p " > Example: < i > italic </ i > and < b > bold </ b > </ p >. First create Range and set position using above syntax. On button click trigger function to return cursor position on div. Example 2: Below example illustrates how to set caret cursor position on content-editable element div.


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

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

Selection.containsNode(), Check the Browser compatibility table carefully before using this in When false , containsNode() only returns true when the entire node is part This snippet checks whether anything inside the body element is selected. p> <p>Hmm, where <span id="secret" style="color:transparent">SECRET</span>  range = document.createRange(); referenceNode = document.getElementsByTagName("div")[0]; range.selectNodeContents(referenceNode); Live sample. This example lets the user select and deselect a paragraph with buttons. Document.createRange(), Range.selectNodeContents(), and Selection.addRange() are used to select the content.


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

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

Selecting an element inside an element with contenteditable="true", Bug 1318312 part.2 Mark Selection as "called by JS" when every Selection API the <div> does not get focused and the content is not immediately editable. Neil, you know, Gecko doesn't move focus on comment #0 and comment #1 case​. Otherwise, e.g., one of the ranges is in non-editable element or Looks like there  The HTMLInputElement.setSelectionRange() method sets the start and end positions of the current text selection in an input or textarea element. MDN will be in maintenance mode for a brief period, Wednesday July 1, from around 2:30 PM until no later than 4:00 PM Pacific Time (in UTC, Wednesday July 1, 9:30 PM to 11:00 PM).


HTML DOM contentEditable Property, Tip: You can also use the isContentEditable property to find out if the content of an element is editable or not. Browser Support. The numbers in the table specifies  The Window.getSelection() method returns a Selection object representing the range of text selected by the user or the current position of the caret. Syntax selection = window.getSelection(); Return value. A Selection object. When cast to string, either by appending an empty string ("") or using Selection.toString(), this object returns the


How to set cursor position in content-editable element using , In order to set caret cursor position in content editable elements like div tag is click assign input value to range function to return cursor position on div. getSelection(); // Here 'selectobj' is created object for window // get selected or div id = "editable" contenteditable = "true" Check out this Author's contributed articles. I have a contenteditable div, it has some paragraphs in it. Assuming a situation, when I click the button "set caret position", the main div will focus, the caret will start at position number 8


execCommand method (document, TextRange, ) JavaScript, Allows running commands on certain objects. If an element exists around the non-bold text, then Firefox, Google Chrome Example 4 shows a solution in Firefox, Opera, Google Chrome and Safari for changing the color of the selected text. <body> <div contenteditable="true" onmouseup="SetToBold ();">Select a part  Hi, I'm trying to get/set the caret/cursor position in an contenteditable div. How can I do this in an HTML/JS Metro styled app? Thank you · Incase someone wanted a useful