Javascript 如何在组件单击时以编程方式选择文本

我想在单击时选择一个简单的span元素的内容

<span 
  onClick={() => // How do I programmatically highlight the `Click Me!` text?}
>Click Me!</span>

//如何以编程方式突出显示“单击我！”文本？}
>点击我！

有没有办法做到这一点

---

编辑：很抱歉，问题似乎不够清楚，我不仅想突出显示跨度，实际上我还想触发元素的dom选择，以便之后可以对其进行复制和/或写入（例如，如果它位于打开可编辑内容的div中）.

您可以使用react state以编程方式突出显示

span

类应用程序扩展了React.Component{
状态={
海尔顿：错，
smallPortionHighlight:false
};
render（）{
返回(
this.setState（{highlightOn:true}）
>
点击我！




this.setState（{smallPortionHighlight:true}}>
这是一个很长的文本，但只需突出显示此{“”}
点击我！
);
}
}
render（，document.getElementById（“根”））


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={activate:false}；
}
toggleClass（）{
const currentState=this.state.active；
this.setState（{active:！currentState}）；
};
render（）{
返回(
this.setState（{active:！this.state.active}）}>
点击我！
);
}
}
ReactDOM.render（，document.getElementById（'root'））
。突出显示{
背景色：#FFFF00；
}
非常感谢您的回答，但问题似乎并不完全清楚，对此我深表歉意

无论如何，我在这里找到了答案：


我确实希望以编程方式选择内容，因此我使用的最后一段代码如下：

function selectContents(el: any) {
  let range = document.createRange();
  range.selectNodeContents(el);
  let sel = window.getSelection()!;
  sel.removeAllRanges();
  sel.addRange(range);
}

<span onClick={(e) => selectContents(e.target)}>
  {node.name}
</span>

功能选择内容（el:any）{
让range=document.createRange（）；
范围。选择节点内容（el）；
让sel=window.getSelection（）！；
选择removeAllRanges（）；
选择添加范围（范围）；
}
选择内容（如目标）}>
{node.name}

它在electro中运行良好，但与旧浏览器可能存在一些兼容性问题

干杯。
您的意思是突出显示文本或选择范围内的文本？您希望突出显示是永久性的还是闪烁？选择范围内的文本