React onCopy事件处理无法获取部分选中文本问题如何解决

document.getSelection().anchorNode仅代表选区起始位置锚定的DOM节点，其textContent/wholeText属性返回的是该节点的全量文本，和用户实际选中的范围没有关联。你没有读取选区的起止偏移，所以无论选中单元格内多少内容，拿到的都是整个<td>节点的完整文本。

直接调用Selection对象的toString()方法，即可获取用户实际选中的纯文本片段，该方法自动适配部分选中、跨节点选中的场景，不需要手动计算选区偏移。

const handleCopy = (e) => {
    // 读取用户实际选中的文本，而非节点全量内容
    const selectedText = window.getSelection().toString();
    e.preventDefault();
    e.clipboardData.setData('text/plain', formatString(selectedText));
}

对应的表格绑定逻辑不需要调整：

<table onCopy={handleCopy}>
   <thead></thead>
   <tbody>
      <tr>
         <td>12-23</td>
      </tr>
   </tbody>
</table>

• 全选单元格内容12-23时，selectedText取值为12-23，经格式化后返回1223，和原有正常逻辑表现一致
• 部分选中内容如12-2时，selectedText取值为12-2，经格式化后返回预期结果122

如果后续需要处理富文本格式的复制内容，可通过window.getSelection().getRangeAt(0)获取选区范围对象，基于范围的起止节点、偏移量做更复杂的自定义处理。

内容的提问来源于stack exchange，提问作者heliosk