Удалить выделение, добавленное к выделенному тексту с помощью JavaScript?

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()