javascript - 如何获取跨度中选择了哪个单词

Question

我有以下场景：内容显示在 div 中。用户可以从该内容中选择单词。我正在使用window.getselection().tostring()方法获取用户的选择。

span现在我想要/中所选内容的位置div。

例如。父母div有这样的内容：

<span>abc xyz abc</span>
<div>abc xyz abc</div>
<span>abc xyz abc</span>

因此，如果我从第一个跨度中选择第一个 abc，或者我在第一个跨度中选择第二个 abc，或者我从第一个跨度和第二个 div 中选择 abc abc，那么突出显示所选部分的最佳方式是什么。

提前致谢

Answer 1

它非常适合我：

    import React, {useEffect, useRef} from 'react';

const App = () => {

const spanInput=useRef();

    useEffect(()=>{
        console.log(spanInput.current.innerHTML)
    },[spanInput])


    return (
        <div>


       <span ref={spanInput}>test text</span>

        </div>
    );
};

export default App;

Answer 2

以下解决方案如何有用

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var newNode = document.createElement("span");
newNode.setAttribute("style", "background-color: pink;");
range.surroundContents(newNode);