Применить диапазон к выделенному тексту в JavaScript

Question

Я хотел бы применить класс span к выделенному тексту в окне браузера в Javascript (как функция выделения).

Я пробовал с

function replaceSelectedTextWithHTMLString(newstring) {
    var range = window.getSelection().getRangeAt(0);
    range.deleteContents();
    range.innerHTML = newstring;
}

, но он не работает,Если я пытаюсь вставить как newstring = " text ", я ничего не могу посмотреть, и «текст» не появляется.Кажется, это не нравится HTML-код.Как я могу решить это?

Answer 1

Насколько это легко, зависит от того, чего именно вам нужно достичь. Если все, что вам нужно, это базовая подсветка с использованием цвета фона, ваш лучший выбор - document.execCommand(). Ниже приведен код для этого: Изменить CSS выделенного текста с помощью Javascript

Если вам нужно применить больше стилей, чем может предоставить document.execCommand() (есть также различные другие команды форматирования для таких вещей, как полужирный и курсив, но разметка, которую это производит, различается в разных браузерах и не всегда На основе CSS), это гораздо сложнее: в общем, вам нужно окружить каждый текстовый узел в выделении в промежутке нужным классом. Я бы предложил использовать Rangy и его модуль применения класса CSS , чтобы сделать это кросс-браузерным способом. Отказ от ответственности: это плагин для моей собственной библиотеки.