更改部分文字的颜色 <p> 根据用户选择标记？

Question

I'm developing an extension for Google Chrome; as a part of it there is a text highlighting capability.

I've managed to highlight a complete <p></p> tag (or any other tag) but I can't figure out how to highlight a part inside a tag. (user will not select an entire tag)

I found that I should use <span> inside the <p> tag but I can't figure out a way to do it.

1. How do I identify the part that the user selected?

2. How do I highlight the selected part (eg change the back color)?

A detailed explanation would be really helpful and highly appreciated, since I'm new to extension development.

Answer 1

What I've done in the past is split the text into 3 parts:

1- the text before the selected text.

2- the selected text.

3- the text after the selected text.

Then I clear the element's innerHTML (or another method), add the 'before' text, add a span with their text as its text (which has a style that can be highlighted), and the 'after' text.

---

To find out what they selected, you can use ranges (selectionStart & selectionEnd) eg,

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

This method isn't perfect, but it's a good starter to learn with.