获取范围的开始和结束偏移量相对于其父容器
假设我有这个HTML元素：
<div id="parent">
Hello everyone! <a>This is my home page</a>
<p>Bye!</p>
</div>
用户用他的鼠标选择“家”。
我希望能够确定他选择的#parent多少个字符（以及他的选择结束时#parent末尾有多少个字符）。 即使他选择了一个HTML标签，这也应该起作用。 （我需要它在所有浏览器中工作）
range.startOffset看起来很有希望，但它只是相对于范围的直接容器的偏移量，并且仅当容器是文本节点时才是字符偏移量。
UPDATE
正如评论中指出的那样，我原来的回答（下文）只会返回选择的结尾或插入位置。 调整代码以返回开始和结束偏移量相当容易; 这里有一个例子：
function getSelectionCharacterOffsetWithin(element) {
var start = 0;
var end = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if (typeof win.getSelection != "undefined") {
sel = win.getSelection();
if (sel.rangeCount > 0) {
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.startContainer, range.startOffset);
start = preCaretRange.toString().length;
preCaretRange.setEnd(range.endContainer, range.endOffset);
end = preCaretRange.toString().length;
}
} else if ( (sel = doc.selection) && sel.type != "Control") {
var textRange = sel.createRange();
var preCaretTextRange = doc.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToStart", textRange);
start = preCaretTextRange.text.length;
preCaretTextRange.setEndPoint("EndToEnd", textRange);
end = preCaretTextRange.text.length;
}
return { start: start, end: end };
}
function reportSelection() {
var selOffsets = getSelectionCharacterOffsetWithin( document.getElementById("editor") );
document.getElementById("selectionLog").innerHTML = "Selection offsets: " + selOffsets.start + ", " + selOffsets.end;
}
window.onload = function() {
document.addEventListener("selectionchange", reportSelection, false);
document.addEventListener("mouseup", reportSelection, false);
document.addEventListener("mousedown", reportSelection, false);
document.addEventListener("keyup", reportSelection, false);
};#editor {
padding: 5px;
border: solid green 1px;
}Select something in the content below:
<div id="editor" contenteditable="true">A <i>wombat</i> is a marsupial native to <b>Australia</b></div>
<div id="selectionLog"></div>我知道这已经过了一年了，但是这篇文章是关于查找插页位置的许多问题的顶级搜索结果，我发现这很有用。
我试图使用Tim的优秀脚本，在内容可编辑div中将元素从一个位置拖放到另一个位置后，找到新的光标位置。 它在FF和IE中完美运行，但在Chrome中，拖动动作突出显示拖动开始和结束之间的所有内容，导致返回的caretOffset太大或太小（按所选区域的长度）。
我在第一个if语句中添加了几行，以检查是否选择了文本并相应地调整结果。 新的声明如下。 请原谅我，如果不适合在这里添加这个，因为这不是OP所要做的，但正如我所说的，有关Caret职位相关信息的一些搜索让我看到了这篇文章，所以它（希望）有可能帮助别人。
Tim的第一条if语句增加了行（*）：
if (typeof window.getSelection != "undefined") {
var range = window.getSelection().getRangeAt(0);
var selected = range.toString().length; // *
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
if(selected){ // *
caretOffset = preCaretRange.toString().length - selected; // *
} else { // *
caretOffset = preCaretRange.toString().length;
} // *
}
上一篇: Get a range's start and end offset's relative to its parent container