Get the Highlighted/Selected text in JavaScript

53 Views Asked by At

I use this function to get the selected text in js (by using mouse drag and mouse up):

I use it in Overleaf website, and if i select text about a page like this it work well - image 1. But if i select more than 2 pages (i mean if it is long enough) it will loss some text at the begining (except the first sentence) - image 2,3

img1

image 2

image 3

enter image description here

I dont know how to fix it, please help me

function getSelectedText() {
  var selectedText = '';

  // window.getSelection
  if (window.getSelection) {
      selectedText = window.getSelection().toString();
  }
  // document.getSelection
  else if (document.getSelection) {
      selectedText = document.getSelection().toString();
  }
  // document.selection
  else if (document.selection) {
      selectedText =
          document.selection.createRange().text;
  } else return '';
  // To write the selected text into the textarea
  console.log("trong h");
  return selectedText;
}

actually i code an extension and this is where i use that code:

    function showExtensionIcon() {
        const tooltipResult = document.querySelector('div#research-result-ext-uit')
        //if(tooltipResult) hideOnClickOutside(tooltipResult)
        //tooltipResult.remove();

        selectionText= getSelectedText();
        if(selectionText.length >0) {  
            const [selectionTextNode, selectionTextRange, selectedElement, getRange]= getRangeSelectionText();
            console.log("lần đầu:",selectionText);
            if(tooltipWrapper) tooltipWrapper.remove();
            renderTool(selectionTextRange, selectedElement, selectionText, getRange, selectionTextNode); // hiển thị icon extension cho user click
            tooltipWrapper = document.querySelector('div#research-ext-uit'); // Update the tooltipWrapper variable with the new tooltip
            setTimeout(() => {
                const tooltipWrapper = document.querySelector('div#research-ext-uit'); 

                if(tooltipWrapper) tooltipWrapper.remove();
            }, 3000)
        }
    }
0

There are 0 best solutions below