How to know which element user selected in web page used javascript?-CodePudding

I can used window.getSelection to get selected words.

<div id="content">
    <p >If you don't know, you can <a href="https://google.com">google</a></p>
</div>
<script>
  let selectionObj = null;
  let selectedText = "";
  function getCurrentSelect() {
    if (window.getSelection) {
      selectionObj = window.getSelection();
      selectedText = selectionObj.toString();
      return {
        selectText: selectedText
      }
    }
  }
  window.onload = function (){
    document.body.addEventListener('mouseup', function(){
      // if (selectOb) console.log(getCurrentSelect()===selectOb);
      // selectOb = getCurrentSelect();

      console.log('onmouseup');
      console.log(getCurrentSelect());
    })
  }
</script>

if have two or more identical elements.

<div id="content">
    <p >If you don't know, you can <a href="https://google.com">google</a></p>
    <p >If you don't know, you can <a href="https://google.com">google</a></p>
    <p >If you don't know, you can <a href="https://google.com">google</a></p>
</div>

how to know which element selected?

I want to be able to return an element object when selecting text.But I don't know what to do.

CodePudding user response：

window.getSelection() will return a selection object which contains some of the properties that you might be interested in. For example, you can access the parent element of the text you select via window.getSelection().baseNode.parentElement. This will return a parent element which you could manipulate with your code furthermore.

In the code below, I will get the parent node of the selected text, and change the color of it (style property) to red. Please find it here:

let selectionObj = null;
let selectedText = '';
function getCurrentSelect() {
  if (window.getSelection) {
    selectionObj = window.getSelection();
    selectedText = selectionObj.toString();
    return {
      selectText: selectedText,
      parentElement: selectionObj.baseNode.parentElement,
    };
  }
}
window.onload = function () {
  document.body.addEventListener('mouseup', function () {
    console.log('onmouseup');
    const { parentElement } = getCurrentSelect(); // this one will give the parent element of the selected text
    parentElement.style.color = 'red'; // we change one of the properties of the parent element
    console.log(getCurrentSelect());
  });
};

CodePudding user response：

  let selectionObj = null;
  let selectedText = "";
  
  window.onload = function (){
    document.body.addEventListener('mouseup', function(e){
      // if (selectOb) console.log(getCurrentSelect()===selectOb);
      // selectOb = getCurrentSelect();

      console.log('onmouseup');
      console.log(e.target.innerText);
    })
  }

<div id="content">
    <p >If you don't know, you can <a href="https://google.com">google</a></p>
</div>