反应：在具有多个跨度元素的div中选择事件

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（）。

但不确定是否有风险