JavaScript execCommand("HiliteColor") 取消高亮显示

Question

JavaScript execCommand("HiliteColor") 取消高亮显示

3

JavaScript execCommand("HiliteColor")可以通过添加span元素很好地实现文本高亮，但我希望能够动态取消高亮文本，方法是检查所选文本是否在已高亮的span元素中。然后还有一个问题，就是如果只有一半所选文本在span元素中怎么办。我已经尝试过手动添加span元素并尝试取消高亮，但是：

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

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

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

我想检查背景并进行高亮，或者删除高亮类，为此创建了一个函数。当点击按钮时，该函数会接收一个颜色参数。当点击删除高亮按钮时，它将发送颜色参数"transparent":

我的项目在codepen上：https://codepen.io/pokepimp007/pen/wxGKEQ

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

- Zaren Wienclaw

您可以参考以下链接：https://stackoverflow.com/a/32551826/5842628，以获取选择的HTML。 - Jonathan Hamel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mark Baijens · Accepted Answer

我看到你使用了jQuery，所以在你的帖子中添加了jQuery标签。

这就可以解决问题了。

$('#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>

如果您只想删除一个高亮显示，请执行以下操作。

$('#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>

如果您想在单击时将其删除

$('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>