Управлять выделенным текстом с помощью Javascript

Question

Привет, я пытаюсь разработать некоторый код в Javascript, который добавляет выделенный текст в класс.С этим я хочу добиться возможности подсветки текста собственным цветом.

Я хочу, чтобы он выглядел примерно так:

window.getSelected = "<span class=\"highlighted\">" + window.getSelected + "</span>"

после выполнения приведенного выше кодафон выделенного текста окружен тегами span.

спасибо,

fbr

Answer 1

Вы захотите посмотреть на Range Objects, здесь есть хорошее резюме:

http://www.quirksmode.org/dom/range_intro.html

Совместимость браузера будет проблемой, но в основном вы можете получить текущий выбор так, как вы предлагаете, затем преобразовать его в Range и использовать методы объекта Range, чтобы найти и разделить существующие узлы DOM, и вставьте свой собственный тег <span>, содержащий выделенный текст.

Это не совсем тривиально, и включает в себя серьезные манипуляции с DOM, но это полезный предмет, чтобы разобраться. Наслаждайтесь!

Answer 2

извините за мой английский, вы имеете в виду добавление класса к тексту?

function changeClass (elementID, newClass) {
    var element = document.getElementById(elementID);
    element.setAttribute("class", newClass); // This is for good browsers
    element.setAttribute("className", newClass); //For IE<
}

оставь все строки, это безопасно, если ты так поступишь.

Answer 3

Если вы говорите о стилевом выборе, используйте ::selection и ::-moz-selection в CSS.

::selection {
  color: ...;
  background-color: ...;
}

::-moz-selection {
  color: ...;
  background-color: ...;
}

В качестве альтернативы, если вы хотите выделить произвольный элемент с классом:

CSS

.highlighted {
  color: ...;
  background-color: ...;
}

JavaScript

yourElement.className = "highlighted";

Answer 4

Если вы используете jQuery Framework , вы можете попробовать следующий код:

var your_color = 'yellow';
$('.your-class').css('background-color', your_color);

Если вы не используете его, я настоятельно рекомендую вам начать; это делает вещи намного проще, очень стабильно и используется многими популярными веб-сайтами, включая Google и переполнение стека.