从突出显示的句子中的一个单词删除背景色

时间:2018-08-10 17:10:41

标签: javascript jquery html css

我可以通过创建跨度来突出显示文本,但是当我在高亮的跨度文本中使用透明的背景色创建跨度时,它仍然继承父标记的背景色,而不是采用透明的背景色。 但是,文本将采用任何不透明的颜色。 我基于http://help.dottoro.com/ljcvtcaw.php突出显示文本 尤其是http://help.dottoro.com/external/examples/ljcvtcaw/execCommand_4.htm

我过去也曾使用document.execCommand('ForeColor',false,yellow),它非常直观,可以删除或合并span标签,但从未删除过以此方式创建的span标签。

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;
    }
  }
}

解决方案

我回过头来,使用execCommand函数重构了代码。

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

这会动态创建和删除我想要的跨度。

0 个答案:

没有答案