javascript - 动态突出显示(更改背景)网页中的内容

Question

有没有办法在选择特定文本的同时动态更改网页中文本的背景颜色。

例如:

html 页面中显示的示例文本。我想在从鼠标指针进行选择时突出显示该页面中的特定文本。

我的基础工作:

为特定选定的文本添加“CSS 样式”类。但如何动态地从网页中获取选定的文本。

Answer 1

您可以使用 CSS 选择器 ::selection 动态设置所选文本的样式。

#content::selection {
  background-color: plum;
  color: white;
}
#content::-moz-selection {
  background-color: plum;
  color: white;
}

<div id="content">Sample text display in the html page. I want to high light the particular text in that page, while selecting from mouse pointer.</div>