我有 contentEditable 元素（可以是 p、div、...），我想在其中获得插入符号（光标）位置。我通常可以用这段代码实现它：
var position = window.getSelection().getRangeAt(0).startOffset;
当元素仅包含文本时，这可以正常工作。但是当元素包含一些 HTML 格式时，返回的位置是相对于包含的 HTML 元素中插入符号的位置。
让我们假设 contentEditable 元素的内容是这样的：
AB<b>CD</b>EF
如果 caret 在 inside <b></b>，比方说在 C 和 D 之间，上面代码的返回位置是 1 而不是 3（从 contentEditable 元素的内容开始计算）
任何人都可以提出解决方案吗？
我写了一个更简单的版本，它也适用于 IE < 9：
https://stackoverflow.com/a/4812022/96100
这实际上是一个比整个文档文本中的字符偏移更有用的结果：startOffsetDOM 范围的属性（window.getSelection().getRangeAt()返回的内容）是相对于其startContainer属性的偏移（不一定总是文本节点，通过道路）。然而，如果你真的想要一个字符偏移，这里有一个函数可以做到。
这是一个活生生的例子：http : //jsfiddle.net/timdown/2YcaX/
这是函数：
function getCharacterOffsetWithin(range, node) {
var treeWalker = document.createTreeWalker(
node,
NodeFilter.SHOW_TEXT,
function(node) {
var nodeRange = document.createRange();
nodeRange.selectNode(node);
return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ?
NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
},
false
);
var charCount = 0;
while (treeWalker.nextNode()) {
charCount += treeWalker.currentNode.length;
}
if (range.startContainer.nodeType == 3) {
charCount += range.startOffset;
}
return charCount;
}
这是一篇很老的帖子，但仍然是在谷歌上搜索的第一个结果之一，所以也许仍然有用。考虑到 html 标签和换行符，这对我来说也是正确的（在 Firefox 上测试）：
function getCaretPosition (node) {
var range = window.getSelection().getRangeAt(0),
preCaretRange = range.cloneRange(),
caretPosition,
tmp = document.createElement("div");
preCaretRange.selectNodeContents(node);
preCaretRange.setEnd(range.endContainer, range.endOffset);
tmp.appendChild(preCaretRange.cloneContents());
caretPosition = tmp.innerHTML.length;
return caretPosition;
}
它使用 cloneContents 功能来获取实际的 html 并将文档片段附加到临时 div 以获取 html 长度。
如果要插入元素，则可以尝试执行以下操作：
// Get range
var range = document.caretRangeFromPoint(event.clientX, event.clientY);
if (range)
range.insertNode(elementWhichYouWantToAddToContentEditable);