使用Javascript更改选定文本的CSS

我试图做一个JavaScript书签，将作为一个荧光笔，改变网页上选定的文本的背景，当书签按下时黄色。

我正在使用下面的代码来获取选定的文本，它工作正常，返回正确的string

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; 

}

但是，当我创build了一个类似的function，使用jQuery来更改所选文本的CSS，它不起作用：

 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'}); 

}

有任何想法吗？

Answer 1

最简单的方法是使用execCommand() ，它有一个命令来改变所有现代浏览器中的背景颜色。

以下应该做任何你想要的select，包括跨越多个元素。 在非IE浏览器中，打开designMode ，应用背景颜色，然后再closuresdesignMode 。

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); } } 

Answer 2

这是一个如何工作的粗略例子。 正如Zack指出的那样，您需要了解select跨越多个元素的情况。 这并不是为了被用来帮助理解stream动。 在Chrome中testing

 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 ); 

Answer 3

在Firefox中，您可以使用::-moz-selection psuedo-class。
在Webkit中，您可以使用::selection伪类。

Answer 4

看看我在http://www.jsfiddle.net/hbwEE/3/上的一个小例子;

它不考虑跨越多个元素的select..（ IE浏览器将做，但将搅乱HTML一点.. ）

Answer 5

为了使高亮显示永久保留，我相信你将不得不把select包装在一个新的DOM元素（ span应该这样做）中，然后你可以附加样式属性。 我不知道jQuery是否可以为你做。 请记住，select可以跨越元素边界，所以在一般情况下，你将不得不注入大量的新元素

Answer 6

我喜欢蒂姆的回答，它干净而快速。 但它也closures了与亮点进行交互的大门。

直接在文本中插入内联元素是一个不错的select，因为他们在复杂的情况下破坏了文本stream，

所以我build议一个肮脏的黑客

1. 计算每行选定文本的绝对布局（不pipe它们在哪里），
2. 然后在文档主体的末端插入彩色的，半透明的内联块元素。

这个扩展是一个如何做到这一点的例子。

它使用这个库中的 API来获取每个选定行的绝对布局。