how to get id of the div from where some text has been selected in an html page

Question

This may sound silly but i am trting this thing for the past 2 days,

I have an html page. please see the code to get an idea

<div id="mainDiv">
  <div id = "div1">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div id = "div2">
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
  <div id = "div3">
  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
  </div>
</div>

when i select a string from the above html page i can highlight it, change its color etc, but i am not able to get the id of the div from where i have selected the text.

code to get selected text and bold the text

function setAssignment() {

                var range = window.getSelection().getRangeAt(0);

                var selectionContents = range.extractContents();

                var div = document.createElement("span");
                div.id = "assignment";
                div.style.fontWeight = "bold";
                div.style.color ="#FF0000";
                div.appendChild(selectionContents);
                range.insertNode(div);

            }

After searching a lot i got this code

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

but this function return the mainDiv. It dosent give me the name of the div from where i have selected the text from. Please help me in solving this problem

That is if i am selecting and highlighting the text from say div2, i need it as div2, currently i am getting it as mainDiv.

thanks

Answer 1

Your code is good but only change if you want to name of id return return parent; to return parent.id;

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

<div id="mainDiv">
  <div id = "div1">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div id = "div2">
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
  <div id = "div3">
  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
  </div>
</div>

Answer 2

This is working code, It will give div1, div 2 and div 3 as per selection. If you select all 3 then it will give you mainDiv.

<!DOCTYPE html>
<html>
<body>
<div id="mainDiv" onMouseUp="getSelectionParentElement()">
  <div id = div1>
  Div 1
  </div>
  <div id = div2>
  Div 2
  </div>
  <div id = div3>
 Div 3
 </div>
</div>
<script>
function getSelectionParentElement() {
  var parent = null,
  selection;
  if (window.getSelection) {
    selection = window.getSelection();
    if (selection.rangeCount) {
      parent = selection.getRangeAt(0).commonAncestorContainer;
      if (parent.nodeType != 1) {
          parent = parent.parentNode;
      }
    }
  } else if ((selection = document.selection) && selection.type != "Control") {
    parent = selection.createRange().parentElement();
  }
  alert(parent.id);
}
</script>

</body>
</html>

Answer 3

Your code is working fine.

Please check jsfiddle

http://jsfiddle.net/h96f207e/

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

document.onmouseup = getSelectionParentElement;