更改<p>根据用户选择进行标记

Change color of a part of text inside a <p> tag according to user selection?

本文关键字：选择 用户 lt gt 更改      更新时间：2023-09-26

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

我已经设法高亮显示了一个完整的<p></p>标记（或任何其他标记），但我不知道如何高亮显示标记中的某个部分。（用户不会选择整个标签）

我发现我应该在<p>标签中使用<span>，但我不知道怎么做

  1. 如何识别用户选择的零件？

  2. 如何突出显示所选零件（如更改背面颜色）？

详细的解释将是非常有帮助和高度赞赏的，因为我是扩展开发的新手。

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

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

2-所选文本。

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

然后，我清除元素的innerHTML（或其他方法），添加"before"文本，添加一个以其文本为文本的span（具有可以突出显示的样式），以及"after"文本。

要了解他们选择了什么，您可以使用范围（选择开始和选择结束）例如

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);

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

相关文章：