Кнопка выделения выбранного диапазона Javascript

Question

Я пытаюсь создать инструмент изучения для страницы, который позволяет пользователю выбрать любой текст на странице и нажать кнопку.Этот щелчок затем форматирует выделенный текст с желтым фоном.Я могу заставить это работать внутри одного тега, но если диапазон выбора находится в нескольких тегах (например, первый LI в неупорядоченном списке вместе с половиной второго), мне трудно применить стиль.К сожалению, я не могу просто обернуть выделение промежутком здесь.

По сути, я хочу, чтобы эффекты, связанные с contentEditable и execCommand фактически не делая ничего редактируемого на странице, за исключением применения цвета фона к выделенному тексту одним нажатием кнопки.

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

var selected = $().selectedText();
$(selected).css("background-color","yellow");

не имеет никакого эффекта.

Я был бы очень признателен за любую помощь, указывающую мне правильное направление.

Answer 1

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

Обновить

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

function makeEditableAndHighlight(colour) {
    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, sel;
    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);
    }
}

Answer 2

Насколько я знаю, вы не сможете применять стили к обычному тексту. Вы какой-то элемент HTML для работы. Вы можете попробовать обернуть выделенный текст диапазоном, а затем оформить его.

$().selectedText().wrap("<span></span>").parent().addClass("wrapped").css({backgroundColor: "Yellow"});

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

$(".wrapped").each(function(){ ($(this).replaceWith( $(this).text() });

Код не проверен.