Как я могу выделить текст объекта Диапазона DOM?

Question

Как я могу выделить текст объекта Диапазона DOM?

Я выбираю некоторый текст на странице HTML (открытый в Firefox) использование мыши и использование функций JavaScript, я создаю/получаю соответствие rangeobject выделенному тексту.

 userSelection =window.getSelection(); 
 var rangeObject = getRangeObject(userSelection);

Теперь я хочу выделить весь текст, который появляется под rangeobject. Я делаю его как это,

  var span = document.createElement("span");
  rangeObject.surroundContents(span);
  span.style.backgroundColor = "yellow";

Ну, это хорошо работает, только когда rangeobject (startpoint и конечная точка) находится в том же textnode, затем это выделяет соответствующий текст. Исключая

    <p>In this case,the text selected will be highlighted properly,
       because the selected text lies under a single textnode</p>

Но если rangeobject покрывает больше чем один textnode, то он не работает правильно, Он выделяет только тексты, которые лежат в первом textnode, Исключая

 <p><h3>In this case</h3>, only the text inside the header(h3) 
  will be highlighted, not any text outside the header</p>

Какая-либо идея, как я могу сделать, все тексты, который прибывает под rangeobject, выделенным, независимым от того, находится ли диапазон в единственном узле или нескольких узел?Спасибо....

15

javascript dom range highlight

задан Mark Whitaker 9 October 2012 в 11:49

3 ответа

Не могли бы вы пояснить необходимость этой функции. Если вы хотите изменить стиль выделения только выделенного текста, вы можете использовать CSS: ':: selection'

Дополнительная информация: http://www.quirksmode.org/css/selection .html https://developer.mozilla.org/en/CSS/::selection

1

ответ дан 1 December 2019 в 02:10

Можете ли вы попробовать добавить класс для окружающего диапазона и применить иерархический CSS?

var span = document.createElement("span");
span.className="selection";
rangeObject.surroundContents(span);

В определении CSS,

span.selection, span.selection * {
   background-color : yellow;  
}

я не пробовал. Но просто догадываюсь, что это сработает.

0

ответ дан 1 December 2019 в 02:10

Другие вопросы по тегам:

javascript dom range highlight

Похожие вопросы:

score 25 · Accepted Answer

Я бы предложил использовать документ или метод TextRange execCommand , который создан именно для этой цели, но обычно используется в редактируемых документах. Вот ответ, который я дал на похожий вопрос:

Следующее должно делать то, что вы хотите. В браузерах, отличных от IE, он включает designMode, применяет цвет фона, а затем снова отключает designMode.

ОБНОВЛЕНИЕ

Исправлено для работы в IE 9.

ОБНОВЛЕНИЕ 12 сентября 2013 г.

Вот ссылка с подробным описанием метода удаления бликов, созданных этим методом:

https://stackoverflow.com/a / 8106283/96100

function makeEditableAndHighlight(colour) {
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlight(colour) {
    var range;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}