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

Posted 2023-03-06

【中文标题】如何查找元素是不是立即围绕文本选择范围，如果是，它是啥元素？

【英文标题】：How do I find if an element is immediately surrounding a text selection range, and if so, what element it is?如何查找元素是否立即围绕文本选择范围，如果是，它是什么元素？

【发布时间】：2014-05-20 03:22:02

【问题描述】：

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

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

案例一：

this is [some unlinked text]

案例 2：

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

案例 3：

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

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

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

【参考方案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 对象。