在ContentEditable中，如何获取插入符号前面的元素的引用？

Question

我正在尝试编写一个函数，在keyup上，我会在contentEditable div中为插入符号前面的元素提供引用。

如果插入符号位于文本节点中，则该函数应返回null。如果插入符号位于contentEditable的开头，则该函数应返回null。

但如果插入符号位于文本节点的开头，并且此文本节点前面紧跟一个元素（如Span），则该函数应返回对该元素的引用。

并且，如果插入符号位于两个Html元素之间（例如两个Spans之间），那么它应该返回对插入符号之前的元素的引用，即两个元素中的第一个。

如果有两个或多个文本节点紧跟在一起，那么它们应被视为单个文本节点。

我已经开始cobble something together了。我正在考虑使用范围偏移来计算我到文本节点的距离，但感觉过于复杂。我不禁想到有一些我不想的东西。

Answer 1

这可以使用锚节点完成。锚节点是光标所在的节点。我们可以使用previousSibling属性获取它前面的元素。这就是我们如何做到的。

 var selection
 if (window.getSelection)
  selection = window.getSelection();
 else if (document.selection && document.selection.type != "Control")
  selection = document.selection;

var anchor_node = selection.anchorNode; //current node on which cursor is positioned
var previous_node = anchor_node.previousSibling;
var next_node = anchor_node.nextSibling;

previous_node.nodeName对于textnode是'#text'，对于span节点是'span'。这对于next_node也是类似的。你现在可以使用这些和代码来满足你的需求。