JS 粘貼指南

一、數據的粘貼類型

在進行 JS 粘貼時，最常見的數據類型包括文本、HTML、XML、JSON、圖片等。

文本：文本是最常見的粘貼類型。在粘貼文本時，可以使用 clipboardData 對象中的 getData 方法來獲取粘貼板文本的值。例如：

document.addEventListener('paste', function(event) {
  const clipboardData = event.clipboardData;
  const text = clipboardData.getData('text');
  console.log(text);
});

HTML：粘貼 HTML 時，可以使用 getData 方法並指定格式為 text/html 以獲取 HTML 值。例如：

document.addEventListener('paste', function(event) {
  const clipboardData = event.clipboardData;
  const html = clipboardData.getData('text/html');
  console.log(html);
});

XML：針對 XML 粘貼，類似地，可以使用 getData 方法獲取粘貼板上的值，並指定格式為 text/xml。例如：

document.addEventListener('paste', function(event) {
  const clipboardData = event.clipboardData;
  const xml = clipboardData.getData('text/xml');
  console.log(xml);
});

JSON：粘貼 JSON 數據時，可以使用 getData 方法來獲取其值。例如：

document.addEventListener('paste', function(event) {
  const clipboardData = event.clipboardData;
  const json = clipboardData.getData('application/json');
  console.log(json);
});

圖片：對於圖片，需要通過粘貼板上的 DataURL 獲取其值，然後可以將其渲染到頁面上或進行保存。

二、文本粘貼操作

JS 可以用在文本的複製和粘貼操作中，以下是一些常用的技術：

1. 複製文本

使用 execCommand 方法可以完成文本的複製操作，代碼如下：

document.getElementById('copyBtn').addEventListener('click', function() {
  const copyText = document.getElementById('textToCopy');
  copyText.select();
  document.execCommand('copy');
});

2. 監聽文本的粘貼操作

在文本框中輸入內容後，可以使用 event.preventDefault() 來阻止瀏覽器的默認行為，然後在事件中獲取數據：

document.getElementById('pasteBtn').addEventListener('click', function(event) {
  event.preventDefault();
  const pasteText = event.clipboardData.getData('text');
  document.getElementById('pastedText').innerHTML = pasteText;
});

3. 限制文本的粘貼操作

我們可以使用正則表達式過濾非數字字符，限制文本粘貼為數字：

document.getElementById('numberInput').addEventListener('paste', function(event) {
  event.preventDefault();
  const clipboardData = event.clipboardData;
  const pastedData = clipboardData.getData('text/plain');
  if (!/^\d+$/.test(pastedData)) {
    return;
  }
  this.value = pastedData;
});

三、HTML 粘貼操作

對於 HTML 的粘貼，可以使用 dataTransfer 的方法來處理，以下是一些技巧：

1. 對於文本和 HTML 的混合粘貼

可以使用 createElment 方法創建一個 div，將粘貼的 HTML 插入其中，然後獲取文本和標籤信息。JavaScript 代碼如下：

document.getElementById('htmlInput').addEventListener('paste', function(event) {
  event.preventDefault();
  const clipboardData = event.clipboardData;
  const pastedData = clipboardData.getData('text/plain');
  const htmlData = clipboardData.getData('text/html');
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = htmlData;
  const pastedText = tempDiv.textContent || tempDiv.innerText || '';
  const pastedHtml = htmlData.replace(pastedText, '');
  this.focus();
  document.execCommand('insertHTML', false, pastedText);
});

2. 刪除粘貼內容中的樣式

通過 removeFormat 方法可以刪除 HTML 粘貼內容中的樣式，代碼如下所示：

document.getElementById('htmlInput').addEventListener('paste', function(event) {
  event.preventDefault();
  const clipboardData = event.clipboardData;
  const htmlData = clipboardData.getData('text/html');
  this.focus();
  document.execCommand('insertHTML', false, htmlData);
  document.execCommand('removeFormat', false, null);
});

四、圖片粘貼操作

1. 圖片的粘貼和保存

在圖片粘貼時，可以通過 DataURL 獲取圖片對象，然後可以將圖像用於 canvas 或保存為文件：

document.addEventListener('paste', function(e) {
  const items = e.clipboardData.items;
  for (let i = 0; i < items.length; i++) {
    if (items[i].type.indexOf('image') !== -1) {
      const blob = items[i].getAsFile();
      const reader = new FileReader();
      reader.onload = function(event) {
        const img = new Image();
        img.src = event.target.result;
        document.body.appendChild(img);
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        const url = canvas.toDataURL('image/png');
        const a = document.createElement('a');
        a.href = url;
        a.download = 'image.png';
        a.click();
      };
      reader.readAsDataURL(blob);
    }
  }
});

2. 限制只能粘貼圖片

通過攔截粘貼事件可以限制只能粘貼圖片，以下是代碼示例：

document.addEventListener('paste', function(e) {
  const items = e.clipboardData.items;
  for (let i = 0; i < items.length; i++) {
    if (items[i].type.indexOf('image') !== -1) {
      e.preventDefault();
      const blob = items[i].getAsFile();
      // ...
    } else {
      e.preventDefault();
    }
  }
});

五、結語

通過學習以上技巧，我們已經可以實現一些常見的 JS 粘貼操作了。然而需要注意的是，在進行粘貼操作時，需要兼容不同的瀏覽器。在實際的開發中，我們可以根據不同瀏覽器版本使用不同的方案，以達到更好的兼容性。