javascript - 更改 a 内部分文本的颜色根据用户选择标记？

Question

我正在为 Google Chrome 开发一个扩展程序；作为它的一部分，有一个文本突出显示功能。

我设法突出显示了一个完整的<p></p>标签（或任何其他标签），但我不知道如何突出显示标签内的一部分。（用户不会选择整个标签）

我发现我应该<span>在<p>标签内使用，但我想不出办法。

1. 如何识别用户选择的部分？

2. 如何突出显示选定的部分（例如更改背景颜色）？

由于我是扩展开发的新手，因此详细的解释将非常有帮助并受到高度赞赏。

Answer 1

我过去所做的是将文本分成 3 个部分：

1-所选文本之前的文本。

2-选定的文本。

3-所选文本之后的文本。

然后我清除元素的innerHTML（或其他方法），添加“之前”文本，添加一个以它们的文本作为其文本的跨度（具有可以突出显示的样式）和“之后”文本。

---

要找出他们选择的内容，您可以使用范围（selectionStart 和 selectionEnd），例如，

var html = elem.innerHTML;
var before = html.slice(0, elem.selectionStart);
var selected = html.slice(elem.selectionStart, html.selectionEnd);
var after = html.substring(html.selectionEnd);

这种方法并不完美，但它是一个很好的学习方法。