在“CSND”和“掘金”复制文章内容的时候，会额外出现一段版权信息。这是如何做到的？

程序员牛肉

发布于 2024-09-26 13:25:11

1530

发布于 2024-09-26 13:25:11

文章被收录于专栏：小牛肉带你学Java

大家好，我是程序员牛肉。

不知道大家平时使用“CSDN”和“掘金”的频率高不高。如果你经常使用的话，你就会遇到这样一个问题：

[每次复制文章内容的时候，粘贴到其他地方就会有一个版权信息。]

例如我们尝试复制下面的内容：

当我们将复制内容粘贴到其他平台的时候，就会出现一段版权信息：

你有想过这是如何做到的吗？

在想设计方案的时候，先想逻辑方案，再想具体的代码方案。那我想这个功能的逻辑方案应该就是：

[我们的前端去监听“复制”事件。每次复制完了之后，我们的前端就会把版权信息给他拼接到粘贴版中。]

那到底有没有这样一种api，可以实现向粘贴版中写数据呢？

当然有了：

navigator.clipboard 是一个Web API，它提供了一组方法来读取和写入用户的剪贴板。这个API允许网页与用户的剪贴板进行交互，例如复制和粘贴文本、图片等数据。

这个Web API 一共有四个比较常用的方法：

读取剪贴板内容

readText(): 读取剪贴板中的文本内容。返回一个Promise，解析为剪贴板中的文本字符串。
read(): 读取剪贴板中的多种类型数据（如文本、图片等）。返回一个Promise，解析为一个ClipboardItem对象数组。

写入剪贴板内容

writeText(text): 将文本写入剪贴板。接受一个字符串参数text，表示要写入剪贴板的文本。
write(data): 将多种类型的数据写入剪贴板。接受一个ClipboardItem对象数组作为参数。

有了具体的工具之后，实现这个需求就很简单了。我自己写了一个小案例，放在这里，大家感兴趣的话可以自己试一试：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自动添加版权信息示例</title>
</head>

<body>
  <h1>你好，我是程序员牛肉</h1>
  <p>这里是文章的内容，尝试复制这个文本。</p>

  <button onclick="copyTextWithCopyright()">复制文本</button>

  <script>
    async function copyTextWithCopyright() {
      try {
        // 获取用户选择的文本或页面中的文本
        const text = document.querySelector('p').innerText;
        const copyrightNotice = `你好，这是程序员牛肉的文章。如果你想转载，请联系作者`;

        // 添加三行空隙
        const newline = '\n\n\n';
        // 将版权信息添加到文本末尾
        const textWithCopyright = text + newline + newline + newline + copyrightNotice;

        // 写入剪贴板
        await navigator.clipboard.writeText(textWithCopyright);
        alert("文本已复制，包括版权信息。");
      } catch (err) {
        console.error('无法写入剪贴板内容: ', err);
      }
    }

    // 监听复制事件
    document.addEventListener('copy', (event) => {
      const selection = document.getSelection();
      if (selection.toString().length > 0) {
        // 获取用户选择的文本
        const text = selection.toString();
        const copyrightNotice = `你好，这是程序员牛肉的文章。如果你想转载，请联系作者`;

        // 添加三行空隙
        const newline = '\n\n\n';
        // 将版权信息添加到文本末尾
        const textWithCopyright = text + newline + newline + newline + copyrightNotice;

        // 阻止默认复制行为
        event.preventDefault();

        // 写入剪贴板
        navigator.clipboard.writeText(textWithCopyright).then(() => {
          // 恢复选择
          document.execCommand('selectAll', false, null);
          alert("文本已复制，包括版权信息。");
        }).catch(err => {
          console.error('无法写入剪贴板内容: ', err);
        });
      }
    });
  </script>
</body>

</html>

在这个代码中，我们尝试监听用户的“复制”事件，当用户尝试复制我们的文本的时候，我们就会调用自己的方法。在末尾拼接版权信息：“你好，这是程序员牛肉的文章。如果你想转载，请联系作者”。

我们看一看这个前端代码所表示的界面：