一、数据的粘贴类型

在进行 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 的混合粘贴

可以使用 createElement 方法创建一个 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 粘贴操作了。然而需要注意的是，在进行粘贴操作时，需要兼容不同的浏览器。在实际的开发中，我们可以根据不同浏览器版本使用不同的方案，以达到更好的兼容性。

JS 粘贴指南