在很多情况下，我们需要从网页上复制文本并将其粘贴到其他地方。但是，在某些情况下，我们可能需要添加一些额外信息，例如链接、作者信息等，以便引用出处或提供更多上下文信息。在本文中，我们将探讨如何使用前端技术实现这个功能。
通过JavaScript实现
我们可以使用JavaScript来获取复制的文本，并添加任何我们想要的额外信息。具体步骤如下：
首先，在你的HTML文件中插入以下代码片段：
---- -------------- ----------------------- --------------- ------
该代码会创建一个可编辑的DIV元素，并将需要添加额外信息的文本放在其中。
接下来，我们需要编写JavaScript代码来监听复制事件并修改剪贴板内容。代码如下：
----- -------- - ------------------------------------- --------------------------------- ------- -- - ----------------------- ----- --------- - --------------------------------- ----- ------ - --------- ----- --- - ------------- ----- --------------- - ------------------------------------ ----------------------------------------- ----------------- ---
上述代码会监听
copy事件并阻止默认行为。然后，我们获取选中的文本，添加作者和链接内容，并将它们与选定的文本组合起来。最后，我们将修改过的剪贴板内容设置为text/plain格式。最后，在网页中添加一个按钮或其他交互元素，当用户点击该元素时触发复制事件即可。代码如下：
------- --------------------------------------------------
现在，当用户点击“复制”按钮时，选择的文本将被复制到剪贴板中，并包含额外的作者和链接信息。
通过CSS实现
除了JavaScript之外，我们还可以使用CSS的::before伪元素来为复制的文本添加额外信息。具体步骤如下：
在需要添加额外信息的文本周围创建一个容器，并在其中插入以下代码片段：
---- ----------------------- --------------- ------
接下来，在你的CSS文件中编写以下代码：
----------------------- - -------- ----------------------- -
上述代码会将作者和链接信息添加到文本前面，并用换行符分隔它们。
最后，我们需要在网页中添加一个交互元素，当用户右键单击复制的文本时，它将被复制到剪贴板中，并包含添加的作者和链接信息。代码如下：
---- ---------------------- ------------------------------- --------------- ------ -------- -------- --------------------- - ----- --------- - --------------------------------- ----------------------------------------- ------------------------------------------- ----------------------- - ---------上述代码会在用户复制文本时触发
addAttribution函数，并将选中的文本添加到剪贴板内容末尾。
这两种方法都可以为复制的Web文本添加额外信息，并提供更多上下文信息。您可以根据自己的需求选择其中一种方法来实现该功能。
示例代码：https://codepen.io/chatgpt/pen/KKWQOGv
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11778