更改部分文字的顏色 <p> 根據用戶選擇標記？

Question

我正在為Google Chrome開發擴展程序； 作為其一部分，具有文本突出顯示功能。

我設法突出顯示了完整的<p></p>標簽（或任何其他標簽），但是我不知道如何突出顯示標簽中的零件。 （用戶不會選擇整個標簽）

我發現應該在<p>標記內使用<span> ，但是我找不到解決方法。

1. 如何識別用戶選擇的零件？

2. 如何突出顯示選定的部分（例如更改底色）？

因為我是擴展開發的新手，所以詳細的解釋將非常有幫助並受到高度贊賞。

Answer 1

我過去所做的就是將文本分為3部分：

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

2-選定的文本。

3-所選文本后的文本。

然后，我清除元素的innerHTML（或其他方法），添加“ before”文本，添加帶有其文本作為其文本（具有可突出顯示的樣式）的span以及“ after”文本。

---

要找出他們選擇的內容，您可以使用范圍（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);

這種方法並不完美，但它是一個很好的入門者。