Clash Royale CLAN TAG#URR8PPP

Deleting background color from one word in a highlighted sentence

I can highlight text by creating a span but when I go to create a span in that highlighted span text with background color transparent, it inherits the parent tag background color still instead of adopting a background color of transparent.
The text will, however, adopt any color that is not transparent.
I'm basing my highlighting of text off of: http://help.dottoro.com/ljcvtcaw.php
and more specifically http://help.dottoro.com/external/examples/ljcvtcaw/execCommand_4.htm.

I've also used document.execCommand('ForeColor', false, yellow) in the past which was really intuitive and would delete or combine span tags but was never able to delete the span tags created in that way.

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)
var range = sel.getRangeAt(0);
var startContainer = range.startContainer;
var startOffset = range.startOffset;
var endContainer = range.endContainer;
var endOffset = range.endOffset;

if(startContainer == endContainer)
ColorizeNodeFromTo(startContainer, color, startOffset, endOffset);

else
if(startContainer.firstChild)
var startLeaf = startContainer.childNodes[startOffset];

else
var startLeaf = GetNextLeaf(startContainer);
ColorizeLeafFromTo(startContainer, color, startOffset, -1);

if(endContainer.firstChild)
if(endOffset > 0)
var endLeaf = endContainer.childNodes[endOffset-1];

else
var endLeaf = GetPreviousLeaf(endContainer);


else
var endLeaf = GetPreviousLeaf(endContainer);
ColorizeLeafFromTo(endContainer, color, 0, endOffset);

while(startLeaf)
var nextLeaf = GetNextLeaf(startLeaf);
ColorizeLeaf(startLeaf, color);
if(startLeaf == endLeaf)
break;

startLeaf = nextLeaf;





Solution

I've gone back and refactored my code using the execCommand function.

if (!sel.isCollapsed)
if (!document.execCommand("HiliteColor", false, color))
document.execCommand("BackColor", false, color);




This dynamically creates and deletes spans how I want.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.