JS复制文本

发布时间：2023-05-23

一、基础复制文本方法

在JS中，复制文本的基础方法是用document.execCommand()函数。这个函数接受一个参数，用于指定操作，其中包括'copy'，表示复制文本。 除此之外，还可以使用HTML5 Clipboard API来完成复制操作，如下代码示例所示：

//使用document.execCommand()方法
function copyText(id){
  var copyTarget = document.getElementById(id);
  copyTarget.select();
  document.execCommand("copy");
  alert("已复制到剪贴板");
}
//使用Clipboard API
function copyText(id){
  navigator.clipboard.writeText(document.getElementById(id).value)
  .then(() => {
    console.log('复制成功');
  })
  .catch(err => {
    console.log(err);
  });
}

二、防止XSS攻击

由于用户可以在复制的文本中插入恶意代码，可能导致跨站脚本攻击（XSS攻击），因此在复制文本时需要添加一些保护措施。 首先，需要对复制的文本进行过滤，去除其中的HTML标签，使用如下代码示例即可：

function strip(html){
  var doc = new DOMParser().parseFromString(html, 'text/html');
  return doc.body.textContent || "";
}
function copyText(id){
  var copyTarget = document.getElementById(id);
  var plainText = strip(copyTarget.innerHTML);
  navigator.clipboard.writeText(plainText)
  .then(() => {
    console.log('复制成功');
  })
  .catch(err => {
    console.log(err);
  });
}

其次，需要对复制操作进行权限控制，避免恶意JS脚本进行自动复制操作。这可以通过用户手动触发复制操作来实现，如下代码示例所示：

function copyText(){
  var copyTarget = document.getElementById('textArea');
  var plainText = strip(copyTarget.innerHTML);
  var copyBtn = document.createElement('button');
  copyBtn.innerText = '复制到剪贴板';
  copyBtn.addEventListener('click', function(){
    navigator.clipboard.writeText(plainText)
    .then(() => {
      console.log('复制成功');
    })
    .catch(err => {
      console.log(err);
    });
  });
  copyTarget.parentNode.insertBefore(copyBtn, copyTarget.nextSibling);
}

三、兼容性问题

由于navigator.clipboard.writeText()方法是HTML5 Clipboard API中的方法，因此在一些旧版的浏览器中可能会存在兼容性问题。这可以通过使用document.execCommand()方法来解决，但该方法在新版浏览器中可能也会存在问题。 因此，为了解决兼容性问题，需要进行浏览器判断，并选择最适合的方法进行复制操作。如下代码示例所示：

function copyText(){
  var copyTarget = document.getElementById('textArea');
  var plainText = strip(copyTarget.innerHTML);
  if (navigator.clipboard) {
    navigator.clipboard.writeText(plainText)
    .then(() => {
      console.log('复制成功');
    })
    .catch(err => {
      console.log(err);
    });
  } else {
    copyTarget.select();
    document.execCommand("copy");
    alert("已复制到剪贴板");
  }
}

四、手动选择复制范围

有时候需要复制的文本并不是全部内容，而是手动选择的一部分内容。这可以通过JavaScript中的Range对象来实现，如下代码示例所示：

function copySelected(){
  var selection = window.getSelection();
  var range = selection.getRangeAt(0);
  var selectedText = range.cloneContents();
  var tempDiv = document.createElement('div');
  tempDiv.appendChild(selectedText);
  var plainText = strip(tempDiv.innerHTML);
  navigator.clipboard.writeText(plainText)
  .then(() => {
    console.log('复制成功');
  })
  .catch(err => {
    console.log(err);
  });
}

值得注意的是，该方法只能用于手动选择的文本复制，无法将整个文档复制到剪贴板中。

五、使用第三方库

为了简化复制文本的操作，可以使用一些第三方库，如clipboard.js、ZeroClipboard等。这些库能够在兼容各种浏览器的前提下，帮助我们轻松地实现文本复制功能。下面是使用clipboard.js库来复制文本的示例代码：

<!-- 引入clipboard.js库 -->
<script src="clipboard.min.js"></script>
<!-- 调用库中提供的方法进行复制 -->
<script>
var clipboard = new ClipboardJS('.copy-btn');
clipboard.on('success', function(e) {
    console.log('复制成功');
});
</script>
<!-- 添加复制按钮 -->
<button class="copy-btn" data-clipboard-target="#textArea">复制到剪贴板</button>

六、总结

在JS中，复制文本可以使用document.execCommand()函数或者HTML5 Clipboard API。但在进行复制操作时，需要注意防止XSS攻击、兼容性问题、手动选择复制范围等情况。如果想要更简单地实现文本复制功能，可以使用一些第三方库。希望通过这篇文章，能够帮助大家更好地了解JS复制文本相关的知识。

推荐文章