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

【问题标题】：Remove highlight added to selected text using JavaScript?删除使用 JavaScript 添加到所选文本的突出显示？
【发布时间】：2011-12-25 22:55:47
【问题描述】：

我通过以下代码使用 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";
}

我该如何移除突出显示的颜色并恢复文本？

【问题讨论】：

这些东西有很多跨浏览器的麻烦。您可能想查看一个名为 Rangy 的库，它可以帮助平滑它们，并提供 this demo 中的突出显示功能。（我与 Rangy 没有任何关系。）
棘手。我以前见过这个问题，没有简单的方法。
Re Rangy，我是作者，但它不会真正帮助你（但：我正在研究它），除非你使用 CSS 类来进行突出显示，在这种情况下，您可以使用 CSS 类应用程序模块：code.google.com/p/rangy/wiki/CSSClassApplierModule
@T.J.Crowder 我可以在 ios4.2 或更高版本的平台上将 Rangy 库与 UIWebView 一起使用吗？
是的，Rangy 在 Mobile Safari 和 UIWebView 中工作。

标签： javascript dom selection highlight

【解决方案1】：

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

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

代码sn-p：

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

【讨论】：

蒂姆，这太棒了。由于某种原因， unhighlight fn 在尝试创建新的 Color 对象（在野外）时给了我一个错误。不过不用担心，我并不特别强调非高亮颜色与高亮颜色匹配；我宁愿摆脱所有的亮点。所以，为了解决这个问题，我刚刚删除了条件“if(bg && colour.equals(new Colour(bg)))”。谢谢。
@Tim Down 你能检查一下吗.. 在演示中，按钮没有突出显示。请检查。这将是很大的帮助。
@SoI：我想我错过了你的评论。哪个浏览器显示问题？
@Tim Down：我们可以取消突出显示任何特定选定的突出显示文本区域，而不是仅仅摆脱所有突出显示？
是的，我们可以。使用stackoverflow.com/questions/1335252/… 中发布的解决方案

【解决方案2】：

使用

sel.removeAllRanges()

【讨论】：

我认为你不需要做任何其他事情。所有背景颜色都会自动恢复。
他已经使用removeAllRanges。问题是他在一个范围上执行了hilitecolor 命令，所以它现在有了这个，他想稍后删除它。

【解决方案3】：

您可以改用 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）中失败，其中元素样式更改为计算样式。

【讨论】：

我想你误解了我的问题。我想使用 javascript 动态地做到这一点。
@PhoenixJon 这将是动态的。它将仅更改所选文本的背景颜色。不使用 JavaScript，但它会像你想要的那样工作。
@Amaan 感谢您的评论。呃..我想要的是当我选择文本并按“突出显示”按钮时，所选文本仍然突出显示。当我再次按下“删除”按钮时，突出显示的文本变为普通文本。像这样的东西..
谢谢。我想知道execCommand什么时候执行，span标签加了？如果是这样，该标签中是否存在标签名称或 ID？还是只设置背景颜色？
我上次检查时，该命令在应用了适当样式的范围周围包裹了一个<span> 标记。