Javascript: вернуть выделение (выделенный текст) после манипуляций с DOM

Question

Эта функция возвращает текст, выбранный пользователем, и упаковывает его в теги, в данном случае жирный тег.

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

Теперь после вызова функции выделение (выделенный текст) удаляется.Как мне вернуть этот выбор или, может быть, как вызвать функцию, не потеряв свой выбор в первую очередь?

Answer 1

Будет работать следующее:

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

Однако необходимо учитывать несколько проблем:

• Метод Range * surroundContents() не будет работать для каждого Range: itдолжен иметь смысл в DOM, чтобы окружить содержимое Range новым узлом.Например, использование surroundContents() для диапазона, который охватывает два абзаца, но не выбирает полностью либо, выдаст ошибку.Формальное определение этого см. В спецификации DOM Level 2 Range .
• IE до версии 8 включительно не поддерживает DOM Range и имеет совершенно другой объект Selection длядругие браузеры.IE 9 будет иметь такие же возможности Range и Selection, как и другие браузеры.
• Вам необходимо проверить свойство rangeCount выделения, прежде чем продолжить, в противном случае вы получите исключение, если выбора нет.