Javascript 更改a中部分文本的颜色<；p>；根据用户选择标记？

我正在为谷歌浏览器开发一个扩展；作为其一部分，它具有文本突出显示功能

我已经成功地高亮显示了一个完整的标签（或任何其他标签），但我不知道如何高亮显示标签中的一个部分。（用户不会选择整个标记）

我发现我应该在

标记中使用

，但我想不出一种方法来实现它

如何识别用户选择的零件

如何突出显示所选零件（如更改背景颜色）

详细的解释将非常有帮助，并且非常感谢，因为我是扩展开发的新手
 我过去所做的是将文本分为三部分：

1-选定文本之前的文本

2-选定的文本

3-选定文本后的文本

然后，我清除元素的innerHTML（或其他方法），添加“before”文本，添加一个span，将它们的文本作为其文本（具有可以高亮显示的样式），以及“after”文本


要了解他们选择了什么，您可以使用范围（selectionStart&selectionEnd）
e、 g

这种方法并不完美，但它是学习的良好开端。
谢谢，它真的很有帮助。所以，如果我想将它扩展到多个标记（假设用户从多个标记中选择文本，也可能有链接，标记），我如何扩展它。我可以使用相同的代码吗？？这段代码将如何触发。我的意思是如何检测（对于标记，我们可以使用eventListeners）。通常我们使用类似“onclick”或“onmouseup”的事件。我应该为此使用一些事件侦听器吗？如果是这样的话，我该如何使用它们呢？要更改突出显示的颜色，您可以使用CSS
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);