Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

The remove function is not only removing the highlight but also the words.

How can I fix the issue where deleting the highlight also removes the highlighted word?

I currently have a function that highlights selected text, and clicking the highlight deletes it. However, the problem is that not only the tag but also the word is getting removed. Does anyone have any ideas on how to resolve this issue?

Here is the code I'm using:

// Select all elements on the page
let elements = document.querySelectorAll("*");

// Add event listeners for when user selects text on any element
elements.forEach(function(element) {
  element.addEventListener("mouseup", highlightText);
  element.addEventListener("touchend", highlightText);
});

function highlightText() {
  let selection = window.getSelection().toString();

  if (selection !== '') {
    let range = window.getSelection().getRangeAt(0);
    let newNode = document.createElement("mark");
    range.surroundContents(newNode);
}
}

// Add event listeners for when user clicks on highlighted text on any element
elements.forEach(function(element) {
  element.addEventListener("click", function(event) {
    if (event.target.tagName === "MARK") {
      let mark = event.target;
      let textNode = mark.firstChild;
      mark.parentNode.insertBefore(textNode, mark);
      mark.parentNode.removeChild(mark);
    }
  });
});
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
It seems like you want to remove the highlight without removing the text. You can try modifying your code by replacing the following lines: 
mark.parentNode.insertBefore(textNode, mark);
with: 
mark.parentNode.insertBefore(textNode, mark);
This will create a new text node with the same content as the highlighted text and insert it before the highlight element. The highlight element will then be removed without affecting the text node.I hope this helps! Let me know if you have any other questions.

Sources

I Can't Remove Highlighting In Word Help! – How To Fix? - DigiCruncherHow to Unhighlight in Word After Copy and Paste? [5 Methods]Delete Highlight to Text, easily fill and edit PDF online. - pdfFillerApply or remove highlighting - Microsoft SupportCan't remove highlights in Word? Here are 5 steps to help you
avatar
Tolerim
a month ago
The issue with the current code is that when the highlight is clicked to be removed, it is removing the entire element, including any text within it. To solve this issue, instead of removing the entire element, we can replace the element with its contents. Here's an updated click event listener function: 
elements.forEach(function(element) {
  element.addEventListener("click", function(event) {
    if (event.target.tagName === "MARK") {
      let mark = event.target;
      let range = document.createRange();
      range.selectNodeContents(mark);
      let fragment = range.extractContents();
      mark.parentNode.replaceChild(fragment, mark);
    }
  });
});
In this updated function, we first create a new range that contains the contents of the original element. We then extract the contents of the range as a document fragment. Finally, we replace the original element with the document fragment. This way, the text within the element is preserved even after the highlight is removed.
;