Изменение CSS выбранного текста с помощью Javascript

Я пытаюсь создать букмарклет javascript, который будет выступать в качестве маркера, изменив фон выделенного текста на веб-странице на желтый, когда будет нажата букмарклет.

Я использую следующий код для получения выделенного текста, и он отлично работает, возвращая правильную строку

function getSelText() {
var SelText = '';
if (window.getSelection) {
    SelText = window.getSelection();
} else if (document.getSelection) {
    SelText = document.getSelection();
} else if (document.selection) {
    SelText = document.selection.createRange().text;
}
return SelText;

}

Однако, когда я создал аналогичную функцию для изменения CSS выбранного текста с помощью jQuery, он не работает:

function highlightSelText() {
var SelText;
if (window.getSelection) {
    SelText = window.getSelection();
} else if (document.getSelection) {
    SelText = document.getSelection();
} else if (document.selection) {
    SelText = document.selection.createRange().text;
}
$(SelText).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});

}

Любые идеи?

Ответ 1

Самый простой способ сделать это - использовать execCommand(), который имеет команду изменить цвет фона во всех современных браузерах.

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

UPDATE

Исправлено в IE 9.

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, 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

Вот грубый пример того, как он может работать. Как указывает Зак, вам нужно знать случаи, когда выбор охватывает несколько элементов. Это не предназначено для использования как есть, а просто для того, чтобы помочь получить идеи. Протестировано в Chrome.

var selection = window.getSelection();
var text = selection.toString();
var parent = $(selection.focusNode.parentElement);
var oldHtml = parent.html();
var newHtml = oldHtml.replace(text, "<span class='highlight'>"+text+"</span>");
parent.html( newHtml );

Ответ 3

В Firefox вы можете использовать класс ::-moz-selection psuedo.
В Webkit вы можете использовать псевдо-класс ::selection.

Ответ 4

Посмотрите на небольшой пример, который я сделал в http://www.jsfiddle.net/hbwEE/3/

Не учитывается выбор, охватывающий несколько элементов. (IE будет делать, но немного испортит html..)

Ответ 5

Чтобы сделать основной палец постоянно, я считаю, что вам придется обернуть выделение в новый элемент DOM (span должен делать), к которому вы можете присоединить свойства стиля. Я не знаю, может ли jQuery сделать это для вас. Имейте в виду, что выбор может охватывать границы элементов, поэтому в общем случае вам придется вводить целую кучу новых элементов.

Ответ 6

Мне нравится Тим, он чист и быстр. Но он также закрывает двери для взаимодействия с основными моментами.

Вставка встроенных элементов непосредственно вокруг текстов является плохим выбором, поскольку они нарушают поток текста и беспорядок в сложных ситуациях,

Поэтому я предлагаю грязный взлом, который

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

Этот chrome extension является примером того, как это можно сделать.

Он использует API из эту библиотеку, чтобы получить абсолютный макет каждой выбранной строки.