JavaScript 选中文字并响应获取的实现代码

以下是JavaScript选中文字并响应获取的实现攻略：

1. 使用window.getSelection()方法获取选中文字

在JavaScript中，我们可以使用window.getSelection()方法来获得页面中当前选中的文字。该方法返回一个 Selection 对象，它表示用户选择的文本范围。我们可以根据需要对该对象进行各种操作，例如获取选中的文字、修改选中的文字、移动光标等。

具体实现代码如下：

const selection = window.getSelection();
console.log(selection.toString()); // 在控制台打印选中的文字

2. 监听鼠标事件并检查是否有选中的文字

如果我们想要在用户选中文字后立即获取该文字，并对其进行相应的处理，可以在页面中添加一个鼠标事件监听器，并在监听器中调用上述的获取选中文字的方法。

具体实现代码如下：

document.addEventListener('mouseup', function () {
  const selection = window.getSelection();
  const selectedText = selection.toString();

  if (selectedText !== '') {
    console.log(selectedText); // 在控制台打印选中的文字
    // 在这里可以对选中的文字进行其他处理
  }
});

在上面的代码中，我们监听了页面上的鼠标抬起事件。当用户在页面上选中一段文字，并在鼠标松开后，我们将获取其中的选中文字，并判断是否为空。如果选中文字不为空，我们就在控制台打印选中的文字，并可以对其进行进一步的处理。

示例说明

以下是两个使用上述方法实现的示例：

示例1：选中文本后弹出提示框

// 监听鼠标事件
document.addEventListener('mouseup', function () {
  const selection = window.getSelection();
  const selectedText = selection.toString();

  if (selectedText !== '') {
    // 弹出提示框，显示选中的文本
    alert(`你选中了：“${selectedText}”`);
  }
});

在上述示例中，当用户在页面上选中一段文本后，我们将弹出一个提示框，显示选中的文本。

示例2：将选中的文本添加到页面中

// 创建一个按钮元素
const addButton = document.createElement('button');
addButton.textContent = '添加选中文本';

// 在页面中添加按钮
document.body.appendChild(addButton);

// 监听按钮点击事件
addButton.addEventListener('click', function () {
  const selection = window.getSelection();
  const selectedText = selection.toString();

  if (selectedText !== '') {
    // 将选中的文本插入到页面中
    const p = document.createElement('p');
    p.textContent = selectedText;
    document.body.appendChild(p);
  }
});

在上述示例中，我们创建了一个按钮元素，并在页面中添加了该按钮。当用户选中一段文本后，点击该按钮，我们将在页面中添加一个新的段落元素，显示选中的文本。