如果我知道元素 ID，如何在 contenteditable div 中选择（获取范围或选择对象）元素？答案

【问题标题】：How do I select (get range or selection object) an element in a contenteditable div if I know the element ID?如果我知道元素 ID，如何在 contenteditable div 中选择（获取范围或选择对象）元素？
【发布时间】：2019-10-24 14:55:55
【问题描述】：

我有这个 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 的内容。如何获取该元素中内容的范围？

提前致谢！

【问题讨论】：

标签： javascript jquery range selection contenteditable

【解决方案1】：

创建一个范围并使用其selectNodeContents() 方法。

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

这在不支持 DOM Range 的 IE

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

【讨论】：

非常感谢！我在使用您提供的代码时遇到了一些问题。我试过了（jsfiddle.net/Yyjr4/1），但我不确定出了什么问题。编辑：它确实有效。起初我没有意识到，因为我看错了代码。它只是获取#selectThisText 的范围。它不会在#editMe 中进行选择。我正在尝试自己解决这个问题，但如果您能给我提供任何帮助，我将不胜感激。
我想我明白了：jsfiddle.net/Yyjr4/3。我使用window.getSelection().addRange(range) 在页面上进行选择。这将是执行此操作的首选方式吗？非常感谢你的帮助。真是太感谢你了。
@tundoopani：是的，没错。从这个问题中，我不确定您是否只是想要该范围，或者您是否还想选择它。 stackoverflow.com/questions/2044616/…
根据你对stackoverflow.com/questions/15813895/…的回答，Webkit不会选择父节点。那是对的吗？似乎选择不包括 span 标签，所以如果我替换选择，新内容将放置在 span 元素内，而不是完全替换它。有什么解决方法吗？非常感谢您的帮助！
我尝试使用selectNode() 而不是selectNodeContents，但是用新内容替换选择不会替换父节点。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：