用Javascript控制突出显示的文本

Question

你好，我正在尝试使用Javascript编写一些代码，将高亮文本添加到类中。我想要实现的是使用自定义颜色进行文本高亮。

我希望它的效果类似于以下内容：

window.getSelected = "<span class=\"highlighted\">" + window.getSelected + "</span>"

在执行以上代码之后，所选文本的背景周围会被标签包围。 谢谢，

fbr

- ForeignerBR

---

你是指在页面上标记一些文本来进行文本高亮，还是只是给某个类中的文本设置特定的背景颜色？ - Felix Kling

我想允许用户通过用鼠标标记文本来进行高亮显示。类似于： window.getSelected = <span class="highlighted"> window.getSelected </span> - ForeignerBR

Answer 1

你需要了解 Range 对象，这里有一个很好的总结：

http://www.quirksmode.org/dom/range_intro.html

浏览器兼容性可能会成为一个问题，但基本上，您可以按照您建议的方式获取当前选择，然后将其转换为Range，并使用Range对象的方法查找和拆分现有的DOM节点，并插入包含所选文本的<span>标签。

这并不是完全琐碎的，需要涉及到严肃的DOM操作，但这是一个值得深入了解的有益主题。享受吧！

- beeglebug

Answer 2

如果您想要对本地选择进行样式设置，请在CSS中使用::selection和::-moz-selection。

::selection {
  color: ...;
  background-color: ...;
}

::-moz-selection {
  color: ...;
  background-color: ...;
}

或者，如果您想突出显示具有类的任意元素：

CSS

.highlighted {
  color: ...;
  background-color: ...;
}

JavaScript

yourElement.className = "highlighted";

- Eli Grey

Answer 3

不好意思我的英文不太好，您是指将一个类添加到文本中吗？

function changeClass (elementID, newClass) {
    var element = document.getElementById(elementID);
    element.setAttribute("class", newClass); // This is for good browsers
    element.setAttribute("className", newClass); //For IE<
}

保留所有行，这样做是无害的。

- koder

Answer 4

如果您正在使用jQuery框架，您可以尝试以下代码：

var your_color = 'yellow';
$('.your-class').css('background-color', your_color);

如果你还没有使用它，我强烈建议你开始使用；它可以让事情变得更加容易，非常稳定，并且被许多流行的网站使用，包括谷歌和Stack Overflow本身。

- Andreas Bonini

---

我已经使用了jQuery... 但我的问题仍然没有得到回答。我正在使用HTML/Javascript和CSS构建电子书阅读器，并希望允许用户突出显示文本。他们用鼠标突出显示文本，选择一种颜色，然后所选文本的背景会变成用户选择的颜色。 - ForeignerBR