Выделите выделенный текст на странице, когда он охватывает несколько нетекстовых узлов

Question

Я пытаюсь написать некоторый код, который будет выделять любой текст, выделенный на странице, следующий код работает в большинстве случаев, но не тогда, когда диапазон частично выбирает нетекстовый узел (подробнее см. http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-Surrounding)детали).

Есть ли какой-нибудь хороший способ разделить этот диапазон на 2 диапазона и поощрить обе половины отдельно, чтобы обойти эту проблему?

function makeBold() {
    var selection = window.getSelection();
    if (selection.rangeCount) {
        var range = selection.getRangeAt(0).cloneRange();
        var newNode = document.createElement("b");
        range.surroundContents(newNode);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

Answer 1

Вы можете использовать document.execCommand().Обратите внимание, что в браузерах без IE вам придется временно сделать документ редактируемым.

jsFiddle: http://jsfiddle.net/C7j5H/1/

Код:

function highlight() {
    var range, sel;
    // IE case
    if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.execCommand("Bold", false, null);
    } else if (window.getSelection) {
        // Non-IE
        sel = window.getSelection();
        if (sel.rangeCount && sel.getRangeAt) {
            range = sel.getRangeAt(0);
        }
        document.designMode = "on";
        if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
        }
        document.execCommand("Bold", false, null);
        document.designMode = "off";
    }
}