JavascriptroundContents при выделении не работает должным образом, если используется на части уже выбранного элемента

Question

Я бы хотел выделить текст, выбранный пользователем, и скопировать его в текстовое поле.

Последняя часть прекрасно работает. Но выделение выделенного текста завершается неудачей, если я пытаюсь выделить часть уже выделенного текста.

Вот вам JSFiddle Попробуйте выделить текст в правом окне, а затем попытаться выделить часть предыдущего выбора.

Есть идеи?

Соответствующий код:

function highlightSelected() {
var selection = getSelected();
var range = selection.getRangeAt(0);
var newNode = document.createElement("span");
$(newNode).addClass('mark');
range.surroundContents(newNode);
return range;
}

Спасибо !!

Answer 1

surroundContents() может работать только в том случае, если окружение всего диапазона в пределах одного элемента приводит к допустимому HTML (это определение довольно свободно: см. в спецификации для правильного определения). Например, следующий диапазон (обозначенный трубами) может быть заключен в surroundContents():

<p>fo|o<i>bar</i>ba|z</p>

... пока следующее не может:

<p>fo|o<i>ba|r</i>baz</p>

Выбор ваших вариантов зависит от того, чего именно вы пытаетесь достичь. Если вы просто пытаетесь изменить цвет фона выделения, вы можете использовать document.execCommand() для этого . Если вам необходимо добавить класс ко всему содержимому выделения, вам потребуется нечто более сложное, например, модуль применения класса из моей библиотеки Rangy .