javascript - 如何获取 contenteditable div 中当前正在编辑的节点的索引

Question

我有一个 contenteditable div，在这个 div 内，我有 3 个节点

<div id="editable" contenteditable="true"><span>dear</span>world<span>hello</span></div> 

在这种情况下，如果我们使用下面的代码:

console.log(document.getElementById('editable').childNodes)

我们将得到类似[span, text, span]的内容。如何获取正在编辑的节点的索引。例如，如果用户正在编辑单词 dear，我应该获取索引“0”，因为它是第一个节点，如果用户正在编辑单词 >你好，我应该得到索引“2”

我有一个函数可以返回我正在编辑的实际节点，但我不确定是否有帮助。请参阅jsfiddle .

Answer 1

我会将文本节点包装在跨度中，因此只有元素节点，并且只需使用 jQuery 的 index() 来获取索引

$('#editable').on('keydown', function(e){
    var _node = document.getSelection().anchorNode; 
    var node  = _node.nodeType == 3 ? _node.parentNode : _node;
    var index = $(this).children().index(node);

    console.log( index ); // output index

}).contents().each(function(i, node) {
    if (node.nodeType === 3) {
        $(node).wrap('<span />');
    }
});

FIDDLE