JavaScript execCommand("HiliteColor") unhighlight

Question

JavaScript execCommand("HiliteColor") adds highlights really nicely by adding spans but I wanna be able to dynamically unhighlight text by checking to see if the selected text is in a span that is highlighted. Then there's the issue to wear of only half the selected text is in a span. I've tried adding the spans myself and trying to unhighlight them by:

document.getElementsByClassName('highlight').remove();

alert(window.getComputedStyle(document.getElementById("pages"), null).getPropertyValue('background-color'));

alert(document.getElementById("pages").style.backgroundColor);

Just to see if I could check the background and then highlight or if I could remove the class highlight.

My project is on codepen at: https://codepen.io/pokepimp007/pen/wxGKEQ

ANSWER

I created a function that takes a color parameter when a button is clicked. When delete highlight button is clicked it sends the parameter color "transparent":

function Highlight(color) {
  document.designMode = "on";
  var sel = window.getSelection();
  sel.removeAllRanges();
  var range = document.createRange();
  range.setStart(editor.startContainer, editor.startOffset);
  range.setEnd(editor.endContainer, editor.endOffset);
  sel.addRange(range);
  if (!sel.isCollapsed) {
    if (!document.execCommand("HiliteColor", false, color)) {
      document.execCommand("BackColor", false, color);
    }
  }
  sel.removeAllRanges();
  document.designMode = "off";
}

You could maybe inspire yourself from this: https://stackoverflow.com/a/32551826/5842628 to get the selection html. — Jonathan Hamel, Jul 27 '18 at 14:41

Mark Baijens · Accepted Answer · 2018-07-27T15:06:56.513

I saw you use jQuery so added the jQuery tag to your post.

This does the trick.

$('#removeHighlight').on('click', function(){
   $('.highlight').each(function(){
       $(this).replaceWith($(this).text());
   })
})

.highlight {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a stupid bit of text with <span class="highlight">highlight_1</span> in it to display the power of jquery to do stuff like removing  <span class="highlight">highlight_2</span> in a html document. Go on and press the button to see the <span class="highlight">highlight_3</span> magic.</p>
<button id="removeHighlight">Remove</button>

If you only want to remove one highlight do this.

$('#removeHighlight').on('click', function(){
     $('.highlight').first().replaceWith($('.highlight').first().text());
})

.highlight {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a stupid bit of text with <span class="highlight">highlight_1</span> in it to display the power of jquery to do stuff like removing  <span class="highlight">highlight_2</span> in a html document. Go on and press the button to see the <span class="highlight">highlight_3</span> magic.</p>
<button id="removeHighlight">Remove 1</button>

Or if you want to remove it on click

$('p').on('click', '.highlight', function(){
   $(this).replaceWith($(this).text());
})

.highlight {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>This is a stupid bit of text with <span class="highlight">highlight_1</span> in it to display the power of jquery to do stuff like removing  <span class="highlight">highlight_2</span> in a html document. Go on and press the button to see the <span class="highlight">highlight_3</span> magic.</p>

That still deletes all the highlights. I only wanna delete one highlight at a time. — Zaren Wienclaw, Jul 27 '18 at 14:52
@ZarenWienclaw Think you should be able do that yourself with small adjustments. But added 2 snippets. 1 that removes 1 highlight on button click. One snippet removes the highlight you clicked on. — Mark Baijens, Jul 27 '18 at 15:02
I think OP wants to remove the highlight while selecting the text with mouse. i.e. you have `highlight`. You could potentially remove the highlight of only `high` if user selects only this portion of the word. This gets more complex when you have a mix of both highlighted and not highlighted text. Hello world user selects `lo wor` would remove highlight on `wor` from my understanding — Jonathan Hamel, Jul 27 '18 at 15:29

JavaScript execCommand("HiliteColor") unhighlight

1 Answers1