Применение CSS для нескольких текстовых узлов

Question

Я ищу способ применить класс CSS к произвольному текстовому диапазону в документе HTML. Я использую MooTools и библиотеку rangy, и что-то вроде этого работает, если есть только один TextNode для работы:

createRange: function(start, end) {
    var node = this.textArea.childNodes[0]; // textArea is an HTML <span> element

    var range = rangy.createRange();
    range.setStart(node, start);
    range.setStart(node, end);

    return range;
}

Это дает мне диапазон, к которому я могу применить класс CSS; Однако, если у меня есть какая-либо разметка HTML внутри TextArea, у меня теперь есть несколько TextNodes, и мне нужно установить диапазон, начиная с одного и заканчивая другим. Я думаю, что смогу сделать это, если смогу получить упорядоченный список всех TextNodes внутри textArea, но я не уверен, как (или если) я могу получить этот список.

Answer 1

Rangy имеет модуль применения класса CSS , который, я думаю, будет делать то, что вы хотите.

Answer 2

почему бы просто не стилизовать псевдо :: select?

textarea::selection {
background: #abc;
color: #abc;
}

textarea::-moz-selection {
background: #abc;
color: #abc;
}

textarea::-webkit-selection {
background: #abc;
color: #abc;
}