Javascript 如何在contenteditable div中查找单词开头和结尾的插入符号偏移量？

考虑以下代码：

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

一二三四五六七

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

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

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

一两|三四五六七

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

您可以使用我的Rangy库的

演示：

代码：

---

谢谢，没有朗吉会不会太麻烦？我可能不需要库中的所有其他功能，也许我可以提取我需要的：）@ragulka：这取决于可编辑DOM的复杂程度。您可以在此处使用函数：和

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"