在内容可编辑中，如何获取对紧邻插入符号前面的元素的引用

Question

我正在尝试编写一个函数，该函数将在keyup上为我提供对内容可编辑div中插入符号前面的元素的引用。

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

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

而且，如果插入符号放置在两个 Html 元素之间（例如，在两个 Span 之间），那么它应该返回对紧邻插入符号前面的元素的引用，即两个元素中的第一个。

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

我已经开始拼凑一些东西了。我正在考虑使用范围偏移量来确定我在文本节点中的距离，但这感觉过于复杂。我不禁想到，有些明显的事情我没有想到。

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对于文本节点将是"#text"，对于span节点是"span"。next_node也是如此。现在，您可以使用这些并根据您的要求编写代码。