React：在div中使用多个span元素选择事件

Question

I have a React component with parsed text:

The html structure is like:

<div>
    <span>It's a </span>
    <span className="highlight-text">cat</span>
</div>

How I can have a event listener which enable I pass all selected text within this div? For example, if I select "a ca", the event listener can get e.target.value = "a ca".

It is possible the highlight part will be repeating within the full text, for example:

<div>
    <span>It's a slim cat, not a fat </span>
    <span className="highlight-text">cat</span>
</div>

In this case, the selection listener will get 2nd part string, start position of whole text.

Answer 1

This is the first thing that comes to mind.

// Example impl
<Component text="This is a cat" highlight="is a" />

// Component render
render() {
    const {
        text,
        highlight,
    } = this.props;
    // Returns the start index for your high light string
    // in our example 'is a' starts at index 5
    const startHighlightTextIdx = text.search(highlight);

    // Create a substring for the first part of the string
    // ie: 'This is '
    const startText = text.substring(0, startHighlightTextIdx);

    // Create a substring for the last part of the string
    // For this substr we want to start where our startHighlightTextIdx starts 
    // and we want to add the length of the highlighted string
    // in order to ignore the highlighted string
    // ie: start at index 5 + 4 (highlight text length) so substr(9) to end
    const endText = text.substring(
        startHighlightTextIdx + highlight.length,
    );
    <div>
        <span>{startText}</span>
        <span className="highlight-text">{highlight}</span>
        <span>{endText}</span>
    </div>
}

v2:
// This might be a cleaner solution
// explode by the hightlight string and grab index 0 and last
// this outputs ["This ", " cat"]
const textParts = text.split(highlight);
const startText = textParts[0];
const endText = textParts[1];

Answer 2

I got one answer myself, in order to get the selected text, I can just use window.getSelection().

But not sure if there's a risk