Измените CSS выбранного текста с помощью JavaScript
Я пытаюсь сделать JavaScript bookmarklet, который будет действовать как маркер, изменяя фон выделенного текста на веб-странице к желтому, когда bookmarklet будет нажат.
Я использую следующий код для получения выделенного текста, и он хорошо работает, возвращая корректную строку
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'});
}
Какие-либо идеи?
5 ответов
Самый простой способ сделать это - использовать execCommand () , в котором есть команда для изменения цвета фона во всех современных браузерах.
Следующее должно делать то, что вы хотите, с любым выделением, в том числе с несколькими элементами. В браузерах, отличных от IE, он включает designMode , применяет цвет фона, а затем снова выключает designMode .
ОБНОВЛЕНИЕ
Исправлено в 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);
}
}
В Firefox вы можете использовать ::-moz-selection psuedo-class.
В Webkit можно использовать псевдокласс ::selection.
Взгляните на небольшой пример, который я сделал на http://www.jsfiddle.net/hbwEE/3/
Он не учитывает выбор, который охватывает несколько элементов .. ( IE подойдет, но немного испортит HTML .. )
Чтобы сделать выделение постоянным, я полагаю, вам придется обернуть выделение в новый элемент DOM (span подойдет), к которому вы сможете прикрепить свойства стиля. Я не знаю, может ли jQuery сделать это за вас. Имейте в виду, что выделения могут охватывать границы элементов, поэтому в общем случае вам придется вводить целую кучу новых элементов
Вот грубый пример того, как это может работать. Как отмечает Зак, вы должны быть осведомлены о случаях, когда выбор охватывает несколько элементов. Это не предназначено для использования как такового, просто что-то, что поможет развить идеи. Проверено в 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 );