javascript - 如何在内容可编辑的 div 中找到单词开头和结尾的插入符号偏移量？

Question

考虑以下代码：

<div contenteditable="true">One two th|ree <span>four</span> five six seven</div>

让我们假设插入符号（闪烁的光标）位于字母“h”和“r”之间的单词“three”上。获取单词开头和结尾位置的最佳（跨浏览器）方法是什么？

我的目标是确定插入符号是否更接近单词的开头或结尾，然后将插入符号移动到更接近的那个。因此，对于我提供的示例，它应该将插入符号移至此处：

<div contenteditable="true">One two |three <span>four</span> five six seven</div>

如果我能有一个跨浏览器（包括 Opera 和 IE）的解决方案，我会是最好的。

Answer 1

您可以使用我的 Rangy 库的TextRange 模块。

演示：http: //jsfiddle.net/8yU2G/

代码：

var editableDiv = document.getElementById("yourDivId");
var sel = rangy.getSelection();
var selRange = sel.getRangeAt(0);
var originalCharRange = selRange.toCharacterRange(editableDiv);
selRange.expand("word");
var expandedCharRange = selRange.toCharacterRange(editableDiv);

// originalCharRange and expandedCharRange have properties "start" and "end"