JS複製文本

一、基礎複製文本方法

在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>

//添加複製按鈕
複製到剪貼板

六、總結

在JS中，複製文本可以使用document.execCommand()函數或者HTML5 Clipboard API。但在進行複製操作時，需要注意防止XSS攻擊、兼容性問題、手動選擇複製範圍等情況。如果想要更簡單地實現文本複製功能，可以使用一些第三方庫。希望通過這篇文章，能夠幫助大家更好地了解JS複製文本相關的知識。