js修改复制粘贴板上的内容（从网页复制表格的时候多复制了一行）

最新推荐文章于 2023-10-24 15:22:08 发布

买个床

最新推荐文章于 2023-10-24 15:22:08 发布

阅读量776

点赞数

分类专栏：前端学习文章标签： js

本文链接：https://blog.csdn.net/longmushasha/article/details/109053334

版权

前端学习专栏收录该内容

35 篇文章 1 订阅

订阅专栏

该博客介绍了在React组件的生命周期中如何监听并处理复制事件。通过在`componentDidMount`钩子中添加事件监听器，捕获到复制操作后，对选中的多行文本进行替换处理，将连续的换行符合并为一行，然后修改剪贴板内容，并防止默认的复制行为。此技术适用于优化文本复制体验，尤其在前端开发中。

摘要由CSDN通过智能技术生成

	//在didmount生命周期里监听复制事件
  componentDidMount() {
    window.document.addEventListener("copy", this.copy);
  }
 copy = (oEvent) => {
    let copyInfo = "";
    //获取复制信息
    try {
      copyInfo = document.selection.createRange().text;
    }
    catch (ex) {
      copyInfo = window.getSelection().toString();
    }
    let clipboardData = window.clipboardData; //for IE
    if (!clipboardData) {
      // for chrome or firefox
      clipboardData = oEvent.clipboardData;
    }
    //把两行替换成一行
    let myReg = /(\n){2,}/g;
    //修改剪贴板中的内容
    clipboardData.setData('Text', copyInfo.replace(myReg, "\n"));
    //必须禁用原copy方法才能生效
    oEvent.preventDefault();
  }