React：在div中使用多個span元素選擇事件

Question

我有一個帶有解析文本的React組件：

html結構類似於：

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

我如何擁有一個事件偵聽器，使我可以在此div中傳遞所有選定的文本？ 例如，如果我選擇“ ca”，則事件偵聽器可以獲取e.target.value =“ ca”。

高亮部分可能會在全文中重復，例如：

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

在這種情況下，選擇偵聽器將獲得第二部分字符串，即整個文本的開始位置。

Answer 1

這是想到的第一件事。

// 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

我自己得到了一個答案，為了獲得所選文本，我可以只使用window.getSelection（）。

但不確定是否有風險