根据用户选择更改<p>标签内部分文本的颜色？</p>

Question

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

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

我发现我应该在<span>标记内使用<p>，但我无法找到办法。

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

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

详细解释将非常有用并且非常感谢，因为我是扩展开发的新手。

Answer 1

我过去所做的是将文本分为三部分：

1-所选文字前的文字。

2-所选文字。

3-所选文本后的文字。

然后我清除元素的innerHTML（或其他方法），添加'before'文本，添加带有文本作为文本的跨度（具有可以突出显示的样式）和'after'文本。< / p>

---

要了解他们选择的内容，您可以使用范围（selectionStart＆amp; 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);

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