如何查找元素是否立即围绕文本选择范围，如果是，它是什么元素？

Question

我正在开发一个富文本编辑器，它可以按照 Aloha 的方式嵌入到网页中。我遇到的当前问题是在用户创建的文本选择周围插入或更新链接时，我需要知道该选择周围是否已经存在链接，以便我可以分别更新或插入。

例如，假设方括号（[ 和 ]）表示所选范围的边界：

案例一：

this is [some unlinked text]

案例 2：

this is <a href='stackoverflow.com'>some [linked] text</a>

案例 3：

this is <a href='stackoverflow.com'>[some linked text]</a>

在情况 1 和 2 中，我想知道没有立即包围所选文本的元素，在情况 3 中，我想获取紧接所选文本周围的 ANCHOR 标记。我想知道一个高效的跨浏览器解决方案会是什么样子。

另外，我知道Range 对象具有commonAncestorContainer 属性，但有时该属性引用文本节点而不是元素节点。

Answer 1

使用 jQuery：

getWrappingElement = function(range) {
  var $wrapper;

  $wrapper = $(range.commonAncestorContainer);

  // handle cases in which range.commonAncestorContainer is a text node
  if ($wrapper.parent().text().trim() === range.toString().trim()) {
    $wrapper = $wrapper.parent();
  }

  if ($wrapper.get(0).nodeType === document.ELEMENT_NODE) {
    return $wrapper;
  } else {
    return false;
  }
}

其中range 是Range 对象。