Get parent element of a selected text

Question

Is it possible to get the parent element of a selected text in the page? For example:

<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>

Because when getting the selected text, it normally gets it from the window or the document (depending on the browser) but is it that possible to get the parent element of the selected text?

If you want to get the div someparent when the text within spanparent is selected, you could use $('span.spanparent').select(function(){ $(this).parent(); ... }); — Sgoettschkes, Aug 27 '11 at 15:32
@Boo: it doesn't seem to work, I'm not retrieving text from an input field, I need to get the parent of selected text on a typical element (not inputs). — MacMac, Aug 27 '11 at 16:09

Tim Down · Accepted Answer · 2013-07-01T08:31:06.597

54

Here's a function that will get you the innermost element that contains the whole of the user selection in all major browsers (except when multiple ranges are selected, which is only supported in Firefox. If this is important, I can expand the example to deal with that case too):

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;
}

edited Jul 01 '13 at 08:31

answered Aug 27 '11 at 16:05

Tim Down

318,141
75
454
536

1

SUPPOSE I SELECTED THE TEXT FROM DIFFERNT NODE THAN HOW TO GET ALL THE PARENTS?? – Ravi Apr 13 '13 at 06:08
How to get the id of parent if element is span – Ravi Jul 01 '13 at 05:03
1

just to complete the answer, `parentEl.tagName` gives the enclosing tag. – joey rohan Jan 27 '15 at 12:34
why is else if ( (sel = document.selection) && sel.type != "Control") necessary? – Daniel Jul 27 '20 at 07:03
1

@Daniel: It isn't if you don't need to worry about Internet Explorer. – Tim Down Jul 27 '20 at 15:03

chintan adatiya · Answer 2 · 2017-11-08T17:02:32.137

14

I'd suggest to use this

window.getSelection().anchorNode.parentElement

I have tested in safari osx 10.9

edited Nov 08 '17 at 17:02

answered Oct 10 '14 at 21:49

chintan adatiya

1,233
14
17

-1, when i selection is made, many nodes can be selected together and anchorNode or focusNode any of them can be higher in DOM tree (depending on selection direction and length). One should get a parent that is covering both anchorNode and focusNode. – Praveen Tiwari Feb 08 '18 at 03:53
This work perfectly on my part... – Jenuel Ganawed Dec 18 '22 at 12:44

ATES · Answer 3 · 2020-04-21T07:42:37.160

@Tim Down's answer works good, to add more useful code for reaching the specific parent's html content:

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;
      }
  }
}

For example:

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>

Get parent element of a selected text

3 Answers3

Linked