监听用户复制/粘贴的内容

亮学长

于 2024-07-16 10:03:12 发布

阅读量930

点赞数 20

文章标签：前端

本文链接：https://blog.csdn.net/formylovetm/article/details/140457803

版权

window.getSelection

window.getSelection 是 JavaScript 中用于获取当前页面中被用户选中的文本内容的方法。这个方法通常在浏览器环境中使用，主要用于获取用户选择的文本部分。

如何使用 `window.getSelection`：

基本用法：
```
var selection = window.getSelection();
```
这将返回一个 Selection 对象，其中包含了当前用户在页面上选择的文本内容。
获取选中的文本：
```
var selectedText = selection.toString();
```
上面的代码将返回用户选中的文本内容作为字符串 selectedText。
其他属性和方法：
- anchorNode 和 focusNode：返回选区的起始节点和结束节点。
- anchorOffset 和 focusOffset：返回选区的起始偏移量和结束偏移量。
- rangeCount：返回当前选区中包含的选区范围的数量。

示例用法：

document.addEventListener('mouseup', function() {
    var selection = window.getSelection();
    if (selection && selection.toString().length > 0) {
        console.log('Selected text:', selection.toString());
        console.log('Start node:', selection.anchorNode);
        console.log('Start offset:', selection.anchorOffset);
        console.log('End node:', selection.focusNode);
        console.log('End offset:', selection.focusOffset);
    }
});

注意事项：

window.getSelection 返回的是一个 Selection 对象，其具体属性和方法可以根据需要进一步探索和使用。
这个方法在处理用户输入、文本高亮显示或者基于用户选择的操作时非常有用，但在某些情况下，如在内容不可选时或使用范围受限的环境中（如某些移动设备或浏览器插件），其行为可能会有所不同。

总结来说，window.getSelection 是处理用户选择文本的一种强大工具，可以帮助实现各种文本处理和交互效果。

Selection

Selection 对象是 JavaScript 中处理用户选择文本的重要工具，它提供了多个属性和方法，可以帮助开发者实现各种文本处理和交互效果。下面详细讲解 Selection 对象的主要属性和方法：

主要属性：

anchorNode 和 focusNode：
- anchorNode 返回选区的起始节点，即用户开始选择文本的节点。
- focusNode 返回选区的结束节点，即用户结束选择文本的节点。
- 这两个属性可以用来确定选中文本的起始和结束位置所在的具体 DOM 节点。
anchorOffset 和 focusOffset：
- anchorOffset 返回选区起始节点中的偏移量，即选区起始位置在起始节点中的位置。
- focusOffset 返回选区结束节点中的偏移量，即选区结束位置在结束节点中的位置。
- 这两个属性可以帮助确定选区在起始节点和结束节点内的具体位置。
isCollapsed：
- 返回一个布尔值，指示选区是否是折叠状态（即起始点和结束点是否重叠）。
rangeCount：
- 返回当前选区中包含的选区范围的数量。通常情况下，一个选区只包含一个范围，但某些情况下可能包含多个范围。

主要方法：

toString()：
- 返回用户选择的文本内容作为字符串。这是 Selection 对象中最常用的方法之一。
getRangeAt(index)：
- 返回选区中指定索引位置的 Range 对象，每个 Range 对象表示选区中的一个连续的文本范围。
removeAllRanges() 和 addRange(range)：
- removeAllRanges() 方法清除当前选中的所有范围。
- addRange(range) 方法向选区中添加一个新的 Range 对象。

示例用法：

document.addEventListener('mouseup', function() {
    var selection = window.getSelection();
    if (selection && !selection.isCollapsed) {
        console.log('Selected text:', selection.toString());
        console.log('Start node:', selection.anchorNode);
        console.log('Start offset:', selection.anchorOffset);
        console.log('End node:', selection.focusNode);
        console.log('End offset:', selection.focusOffset);

        // 获取选区的 Range 对象
        var range = selection.getRangeAt(0);
        // 处理选中文本的具体逻辑，如高亮、复制等
        // range 可以进一步处理文本范围的样式和内容
    }
});

注意事项：

Selection 对象的具体行为和支持程度可能因浏览器而异。尤其是在移动设备上或使用某些浏览器插件时，可能会有特定的限制或行为差异。
开发者可以利用 Selection 对象的丰富属性和方法，实现复杂的文本交互和处理功能，例如自定义的文本选择操作、富文本编辑器中的高亮显示等。

总结来说，Selection 对象为处理用户选择文本提供了灵活和强大的功能，开发者可以根据具体需求深入使用其属性和方法，实现丰富的文本处理功能。

例子（监听指定的dom内用户复制行为，去除千分符号）

const targetElement = document.querySelector(".pledge-dx-data-grid");
targetElement.addEventListener("copy", function (event) {
  // 获取选中的文本内容
  const selection = window.getSelection();
  let selectedText = selection.toString();

  // 去除千分符
  selectedText = selectedText.replace(/,/g, "");

  // 创建一个新的临时元素，用于存放修改后的文本
  const tempElement = document.createElement("div");
  tempElement.style.position = "absolute";
  tempElement.style.left = "-9999px";
  tempElement.textContent = selectedText;
  document.body.appendChild(tempElement);

  // 选中临时元素的文本
  const range = document.createRange();
  range.selectNodeContents(tempElement);
  selection.removeAllRanges();
  selection.addRange(range);

  // 异步移除临时元素，确保不影响正常操作
  setTimeout(function () {
    document.body.removeChild(tempElement);
  }, 100);
});