Удалить выделение, добавленное в выделенный текст, используя JavaScript?

Я выделил выделенный текст с помощью 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";
}

Как удалить выделенный цвет и восстановить текст?

Ответ 1

Вот код для добавления и удаления бликов. Это слишком долго, чтобы публиковать здесь практически, поэтому я сделал демо-версию и разместил фрагмент ниже. Это не совсем идеально, потому что функция unhighlight() не удаляет элементы <span>, вставленные командой выделения, но с небольшой осторожностью это было бы возможным дополнением.

Live demo: 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;
    }
}

Ответ 2

Вместо этого вы можете использовать CSS:

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

EDIT: обновление в ответ на комментарий и пояснения

<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), где стиль элемента изменяется на вычисленный стиль.

Ответ 3

Используйте

sel.removeAllRanges()