JavaScript 複製貼上剪貼簿

  1. #JavaScript

我們可以透過 Clipboard API 來存取剪貼簿，可以讀取內容，也可以寫入剪貼簿，下面是一個簡單的範例，當使用者複製的時候，會把剪貼簿改寫成 /<shiny-format[^>]*>(.*?)</shiny-format> 字串，並且存成 text/html 格式，之所以會要儲存成 text/html 格式是因為要讓我們可以寫入各種格式的檔案，而前面與後面的 <shiny-format> 標籤則是為了之後做正規把內容抓出來

const handleCopy = (e) => {
  const blob = new Blob(["<shiny-format>AWESOME</shiny-format>"], {
    type: "text/html",
  });
  const data = [new ClipboardItem({ ["text/html"]: blob })];
  navigator.clipboard.write(data);
};

document.addEventListener("copy", handleCopy);

寫入剪貼簿成功了以後，接下來要讀取剪貼簿，這時候就須要讀取 ClipboardItem 的內容，因為我們寫入的是 text/html 的格式，所以讀取的時候也要讀取一樣的格式，在你貼上的時候，應該會在左上角看到要求剪貼簿的權限，要按下允許後才可以貼上

const handlePaste = async (e) => {
  const clipboardItems = await navigator.clipboard.read();
  const blob = await clipboardItems[0].getType("text/html");
  const html = await blob.text();
  const matches = html.match(/<shiny-format[^>]*>(.*?)<\/shiny-format>/);
  console.log(matches[1]);
};

document.addEventListener("paste", handlePaste);

如果你在此網頁複製並貼上，你將會在下面看到 AWESOME 的文字出現，並且在 Console 有一個 log 顯示 AWESOME，你可以把 AWESOME 取代成 JSON 格式，或是任意格式，根據你的需求，就可以複製任何內容並處理它

References