javascript - 如何向复制的网页文本添加额外信息

Question

一些网站现在使用来自 Tynt 的 JavaScript 服务将文本附加到复制的内容。

如果您使用此功能从网站复制文本，然后粘贴，您将在文本底部获得指向原始内容的链接。

Tynt 也会在发生这种情况时进行跟踪。这是一个巧妙的技巧，做得很好。

他们执行此操作的脚本令人印象深刻 - 而不是尝试操作剪贴板(默认情况下只有旧版本的 IE 允许他们执行此操作，并且应始终将其关闭)，而是操作实际的选择。

因此，当您选择文本 block 时，额外的内容将作为隐藏添加 <div>包含在您的选择中。当您粘贴时，额外的样式将被忽略并显示额外的链接。

对于简单的文本 block 来说，这实际上相当容易做到，但当您考虑不同浏览器中复杂 HTML 中可能的所有选择时，这将是一场噩梦。

我正在开发一个网络应用程序 - 我不希望任何人能够跟踪复制的内容，并且我希望额外的信息包含上下文内容，而不仅仅是链接。 Tynt 的服务不太适合这种情况。

有谁知道一个开源 JavaScript 库(可能是 jQuery 插件或类似的)，它提供类似的功能，但不公开内部应用程序数据？

Answer 1

2022 年更新

处理富文本格式的更复杂的解决方案。如果您只处理纯文本，2020 年的解决方案仍然适用。

const copyListener = (event) => {
  const range = window.getSelection().getRangeAt(0),
    rangeContents = range.cloneContents(),
    pageLink = `Read more at: ${document.location.href}`,
    helper = document.createElement("div");

  helper.appendChild(rangeContents);

  event.clipboardData.setData("text/plain", `${helper.innerText}\n${pageLink}`);
  event.clipboardData.setData("text/html", `${helper.innerHTML}<br>${pageLink}`);
  event.preventDefault();
};
document.addEventListener("copy", copyListener);

#richText {
  width: 415px;
  height: 70px;
  border: 1px solid #777;
  overflow: scroll;
}

#richText:empty:before {
  content: "Paste your copied text here";
  color: #888;
}

<h4>Rich text:</h4>
<p>Lorem <u>ipsum</u> dolor sit <b>amet</b>, consectetur <i>adipiscing</i> elit.</p>
<h4>Plain text editor:</h4>
<textarea name="textarea" rows="5" cols="50" placeholder="Paste your copied text here"></textarea>
<h4>Rich text editor:</h4>
<div id="richText" contenteditable="true"></div>

<小时/>

2020 年更新

适用于所有最新浏览器的解决方案。

请注意，即使粘贴到富文本编辑器中，此解决方案也会去除富文本格式(例如粗体和斜体)。

document.addEventListener('copy', (event) => {
  const pagelink = `\n\nRead more at: ${document.location.href}`;
  event.clipboardData.setData('text/plain', document.getSelection() + pagelink);
  event.preventDefault();
});

Lorem ipsum dolor sit <b>amet</b>, consectetur <i>adipiscing</i> elit.<br/>
<textarea name="textarea" rows="7" cols="50" placeholder="paste your copied text here"></textarea>

<小时/>

[较旧的帖子 - 2020 年更新之前]

有两种主要方法可以向复制的网页文本添加额外信息。

1. 操纵选择

<小时/>

这个想法是监视复制事件，然后将带有额外信息的隐藏容器附加到dom，并将选择扩展到它。
此方法改编自this article作者:c.bavota。另请检查jitbit's version对于更复杂的情况。

• 浏览器兼容性:所有主流浏览器，IE > 8。
• 演示:jsFiddle demo .
• Javascript 代码:

    function addLink() {
        //Get the selected text and append the extra info
        var selection = window.getSelection(),
            pagelink = '<br /><br /> Read more at: ' + document.location.href,
            copytext = selection + pagelink,
            newdiv = document.createElement('div');

        //hide the newly created container
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';

        //insert the container, fill it with the extended text, and define the new selection
        document.body.appendChild(newdiv);
        newdiv.innerHTML = copytext;
        selection.selectAllChildren(newdiv);

        window.setTimeout(function () {
            document.body.removeChild(newdiv);
        }, 100);
    }

    document.addEventListener('copy', addLink);

操作剪贴板

<小时/>

这个想法是观察复制事件并直接修改剪贴板数据。这可以使用clipboardData 属性来实现。请注意，此属性在所有主要浏览器中均以只读 方式提供； setData 方法仅在 IE 上可用。

• 浏览器兼容性:IE > 4。
• 演示:jsFiddle demo .
• Javascript 代码:

    function addLink(event) {
        event.preventDefault();

        var pagelink = '\n\n Read more at: ' + document.location.href,
            copytext =  window.getSelection() + pagelink;

        if (window.clipboardData) {
            window.clipboardData.setData('Text', copytext);
        }
    }

    document.addEventListener('copy', addLink);