获取选定文本的父元素答案

【问题标题】：Get parent element of a selected text获取选定文本的父元素
【发布时间】：2011-11-05 03:22:31
【问题描述】：

是否可以获取页面中选定文本的父元素？例如：

<div class="someparent">

Selection of this text should refer to the 'someparent' class.

<span class="spanparent">If this is selected, the parent should be this span</span>

</div>

因为在获取选中文本的时候，一般是从窗口或者文档中获取的（取决于浏览器），但是是否有可能获取选中文本的父元素呢？

【问题讨论】：

你能改写一下吗。我无法得到你需要的东西。
如果你想在 spanparent 中的文本被选中时获取 div someparent，你可以使用 $('span.spanparent').select(function(){ $(this).parent() ; ... });
@Boo：这应该是一个答案:)
@Boo：它似乎不起作用，我没有从输入字段中检索文本，我需要获取典型元素（不是输入）上选定文本的父级。跨度>

标签： javascript jquery text

【解决方案1】：

@Tim Down's 回答效果很好，添加更多有用的代码以达到特定父级的 html 内容：

function getSelectionParentElement() {
  var parentEl = null, sel;
  if (window.getSelection) {
      sel = window.getSelection();
      if (sel.rangeCount) {
          parentEl = sel.getRangeAt(0).commonAncestorContainer;
          if (parentEl.nodeType != 1) {
              parentEl = parentEl.parentNode;
          }
      }
  } else if ( (sel = document.selection) && sel.type != "Control") {
      parentEl = sel.createRange().parentElement();
  }
  while(true){
      // I want to reach upper <span> parent
      if(parentEl.nodeName == "SPAN"){
          console.log(parentEl);
          break;
      }
      else{
          parentEl = parentEl.parentNode;
      }
  }
}

例如：

function getSelectionParentElement() {
      var parentEl = null, sel;
      if (window.getSelection) {
          sel = window.getSelection();
          if (sel.rangeCount) {
              parentEl = sel.getRangeAt(0).commonAncestorContainer;
              if (parentEl.nodeType != 1) {
                  parentEl = parentEl.parentNode;
              }
          }
      } else if ( (sel = document.selection) && sel.type != "Control") {
          parentEl = sel.createRange().parentElement();
      }
      while(true){
          // I want to reach upper <span> parent
          if(parentEl.nodeName == "P"){
              document.getElementById("printable").innerText = parentEl.innerHTML;
              break;
          }
          else{
              parentEl = parentEl.parentNode;
          }
      }
    }

<head>
    <style type="text/css">
    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>

<p>The <strong>coronavirus</strong> COVID-19 is affecting <strong>210 <i>countries</i> and territories</strong> around the world and 2 international conveyances.</p>

<div id="printable">Output: </div>
<button onclick="getSelectionParentElement()">Select 'countries' and click me.</button>

【讨论】：

【解决方案2】：

我建议使用这个

window.getSelection().anchorNode.parentElement

我已经在 safari osx 10.9 中测试过

【讨论】：

-1，当 i 选择时，可以同时选择多个节点，并且 anchorNode 或 focusNode 中的任何一个都可以在 DOM 树中更高（取决于选择方向和长度）。应该得到一个同时覆盖anchorNode和focusNode的父节点。

【解决方案3】：

这是一个函数，它将为您提供包含所有主要浏览器中整个用户选择的最内层元素（选择多个范围时除外，这仅在 Firefox 中支持。如果这很重要，我可以扩展示例也处理这种情况）：

function getSelectionParentElement() {
    var parentEl = null, sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            parentEl = sel.getRangeAt(0).commonAncestorContainer;
            if (parentEl.nodeType != 1) {
                parentEl = parentEl.parentNode;
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        parentEl = sel.createRange().parentElement();
    }
    return parentEl;
}

【讨论】：

假设我从不同节点选择文本而不是如何获取所有父母？？
如果元素是span，如何获取父级的id
只是为了完成答案，parentEl.tagName 给出了封闭标签。
为什么需要 else if ( (sel = document.selection) && sel.type != "Control")？
@Daniel：如果您不需要担心 Internet Explorer，那就不用担心了。