在reactjs中获取具有突出显示文本和标签的选定文本

在ReactJS中获取具有突出显示文本和标签的选定文本，可以通过以下步骤实现：

首先，需要在React组件中创建一个状态变量来存储选定文本的信息。可以使用useState钩子函数来创建状态变量。

import React, { useState } from 'react';

function MyComponent() {
  const [selectedText, setSelectedText] = useState('');

  // 其他组件代码...

  return (
    <div>
      {/* 渲染文本内容 */}
      <p>这是一段文本内容。</p>

      {/* 渲染选定文本 */}
      <p>选定的文本：{selectedText}</p>
    </div>
  );
}

接下来，需要在文本内容中添加事件处理函数，以便在用户选定文本时更新状态变量。可以使用onMouseUp事件来监听鼠标释放事件，并通过window.getSelection()方法获取选定的文本。

import React, { useState } from 'react';

function MyComponent() {
  const [selectedText, setSelectedText] = useState('');

  const handleMouseUp = () => {
    const selection = window.getSelection();
    setSelectedText(selection.toString());
  };

  return (
    <div>
      {/* 渲染文本内容 */}
      <p onMouseUp={handleMouseUp}>这是一段文本内容。</p>

      {/* 渲染选定文本 */}
      <p>选定的文本：{selectedText}</p>
    </div>
  );
}

最后，可以使用CSS样式来为选定的文本添加突出显示效果。可以通过将选定文本包裹在<span>标签中，并为其添加样式来实现。

import React, { useState } from 'react';

function MyComponent() {
  const [selectedText, setSelectedText] = useState('');

  const handleMouseUp = () => {
    const selection = window.getSelection();
    setSelectedText(selection.toString());
  };

  return (
    <div>
      {/* 渲染文本内容 */}
      <p onMouseUp={handleMouseUp}>
        这是一段文本内容。选定的文本：<span className="highlight">{selectedText}</span>
      </p>
    </div>
  );
}

在上述代码中，可以通过定义.highlight样式来为选定的文本添加突出显示效果。

这是一个简单的示例，演示了如何在ReactJS中获取具有突出显示文本和标签的选定文本。根据实际需求，可以进一步扩展和优化代码。