我正在尝试在其中包含嵌套节点的可编辑 div 中查找插入符号的选择索引。
示例( | 是光标):
<div contenteditable="true">1234<span>5678|9</span></div> //Returns 4
我想要 div 中所有字符的索引,因此上面的示例应返回 8。
这就是我现在正在使用的。
var sel = window.getSelection();
return sel.anchorOffset;
我尝试过使用 commonAncestor 以及其他选择和范围方法,但我不确定如何找到它。
最佳答案
穿越树! Here’s a demo.
function getSelectionOffsetFrom(parent) {
var sel = window.getSelection();
var current = sel.anchorNode;
var offset = sel.anchorOffset;
while(current && current !== parent) {
var sibling = current;
while(sibling = sibling.previousSibling) {
if(sibling.nodeType === 3) {
offset += sibling.nodeValue.length;
} else if(sibling.nodeType === 1) {
offset += getContentLength(sibling);
}
}
current = current.parentNode;
}
if(!current) {
return null;
}
return offset;
}
function getContentLength(element) {
var stack = [element];
var total = 0;
var current;
while(current = stack.pop()) {
for(var i = 0; i < current.childNodes.length; i++) {
if(current.childNodes[i].nodeType === 1) {
stack.push(current.childNodes[i]);
} else if(current.childNodes[i].nodeType === 3) {
total += current.childNodes[i].nodeValue.length;
}
}
}
return total;
}
关于javascript - 嵌套节点 javascript 中的插入符索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13925500/