Кнопка выбора ярлыка Javascript

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

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

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

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

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

Любая помощь, направленная мне в правильном направлении, будет с благодарностью.

Ответ 1

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

UPDATE

Исправлено для работы в 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);
    }
}

Ответ 2

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

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

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

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

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