window.getSelection () дает мне выделенный текст, но я хочу HTML

Ответ Тима Вниз на правильном пути. Однако одна проблема заключается в том, что ExtractContentents () удалит выделение от DOM. Вы можете использовать

window.getSelection().getRangeAt(0).cloneContents(); 

, чтобы просто получить копию того, что выбрано. Затем вы можете обернуть это с вашим новым тегом, а затем заменить его выделение. Зазабоченность тому, что касается диапазона, охватывающей несколько элементов HTML, безусловно, является действительным. Я думаю, что после того, как вы получите диапазон, он «исправляет HTML, но когда вы вернете его в него, могут вызвать проблемы. здесь хороший ресурс на объекте диапазона.

Взгляните на спецификацию диапазона DOM . Вы можете получить диапазон от выбора пользователя в Firefox, используя:

var range = window.getSelection().getRangeAt(0);

Обратите внимание, что некоторые браузеры, включая Firefox, позволяют использовать несколько выборов, которые могут быть доступны через методом Getrangeat () . отбора.

Диапазон выражается в терминах узлов и смещений DOM внутри этих узлов. После того, как вы получили ваш диапазон , это не просто сделать именно то, что вы хотите, поскольку границы диапазона могут быть в разных узлах на разных уровнях дерева DOM, поэтому просто окружающие контент диапазона с тегом не всегда возможно. Вы можете сделать что-то вроде следующего, хотя он создаст новый элемент блока для содержения выбранного контента:

var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var div = document.createElement("div");
div.style.color = "yellow";
div.appendChild(selectionContents);
range.insertNode(div);

Другой, Hacky, альтернативы - использовать метод Execommand () ] Документ для изменения выбора (например, установив его к определенному цвету), а затем используя Document.QuerySelectorall или некоторые селекторные библиотеки для выбора элементов с этим цветом, а затем примените к ним.