如果知道元素ID，如何在contenteditable div中選擇（獲取范圍或選擇對象）元素？

Question

我有這個contenteditable元素：

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

我想使用Javascript選擇（獲取范圍對象）#selectThisText的內容。 如何獲得該元素中內容的范圍？

提前致謝！

Answer 1

創建一個范圍並使用其selectNodeContents()方法。

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

在IE <= 8（不支持DOM Range）的IE中不起作用。 但是，這是一種情況，在舊版IE中也一樣容易：

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

Answer 2

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

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

Answer 3

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

演示： http : //jsfiddle.net/5NBnP/

Answer 4

如果您使用的是香草Javascript，則應該可以

var text = document.getElementById('selectThisText').innerHTML;

或使用jQuery

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