Question

我使用JavaScript使用以下代码突出显示所选文本：

var sel = window.getSelection();
if(!sel.isCollapsed) {
    var range = sel.getRangeAt(0);
    sel.removeAllRanges();
    document.designMode = "on";
    sel.addRange(range);
    document.execCommand("HiliteColor", false, "#ffffcc");
    sel.removeAllRanges();
    document.designMode = "off";
}

如何删除突出显示的颜色并恢复文字？

Answer 1

以下是添加和删除要点的一些代码。实际发布这里太长了，所以我做了一个演示并在下面发布了一个片段。它并不是很理想，因为unhighlight()函数不会删除高亮命令插入的<span>元素，但稍加注意这可能会增加。

现场演示：http://jsfiddle.net/timdown/Bvd9d/

代码段：

function unhighlight(node, colour) {
    if (!(colour instanceof Colour)) {
        colour = new Colour(colour);
    }

    if (node.nodeType == 1) {
        var bg = node.style.backgroundColor;
        if (bg && colour.equals(new Colour(bg))) {
            node.style.backgroundColor = "";
        }
    }
    var child = node.firstChild;
    while (child) {
        unhighlight(child, colour);
        child = child.nextSibling;
    }
}

Answer 2

您可以改用CSS：

<style>
    ::selection {background-color: #ffffcc;}
</style>

编辑：更新以回应评论和澄清

<script type="text/javascript">
    var spans = document.getElementsByTagName('span'), i;
    for( i=0; i<spans.length; i++) {
       if( spans[i].style.backgroundColor == "#ffffcc") {
           // Two alternatives. This:
           spans[i].style.backgroundColor = "transparent";
           // OR this, if spans contain only text:
           spans[i].parentNode.replaceChild(spans[i].firstChild,spans[i]);
           i--;
           // End alternatives - only include i-- in the second one
       }
    }
</script>

尽管如此，在某些浏览器（我认为是Firefox）中，元素样式更改为计算样式时会失败。

Answer 3

使用

sel.removeAllRanges()

删除使用JavaScript添加到所选文本的突出显示？

3 个答案: