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

Question

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

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

Tynt 也会在事件发生时对其进行跟踪。这是一个巧妙的技巧，做得很好。

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

因此，当您选择文本块时，额外的内容将作为隐藏的

添加到您的选择中。当您粘贴时，额外的样式将被忽略并显示额外的链接。

对于简单的文本块来说，这实际上相当容易做到，但当您考虑不同浏览器中复杂 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，并将选择扩展到它。
此方法改编自这篇文章，作者：c.bavota。另请检查jitbit 的版本 适用于更复杂的情况。

• 浏览器兼容性：所有主流浏览器，IE> 8.
• 演示：jsFiddle 演示。
• 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);

2. 操作剪贴板

---

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

• 浏览器兼容性：IE> 4.
• 演示：jsFiddle 演示。
• 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);

Answer 2

这是上面修改后的普通 JavaScript 解决方案，但支持更多浏览器（跨浏览器方法）

function addLink(e) {
    e.preventDefault();
    var pagelink = '\nRead more: ' + document.location.href,
    copytext =  window.getSelection() + pagelink;
    clipdata = e.clipboardData || window.clipboardData;
    if (clipdata) {
        clipdata.setData('Text', copytext);
    }
}
document.addEventListener('copy', addLink);

Answer 3

我测试过并且正在运行的 jQuery 最短版本是：

jQuery(document).on('copy', function(e)
{
  var sel = window.getSelection();
  var copyFooter = 
        "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© YourSite";
  var copyHolder = $('<div>', {html: sel+copyFooter, style: {position: 'absolute', left: '-99999px'}});
  $('body').append(copyHolder);
  sel.selectAllChildren( copyHolder[0] );
  window.setTimeout(function() {
      copyHolder.remove();
  },0);
});

Answer 4

这是 jquery 中的一个插件来做到这一点
https://github.com/niklasvh/jquery.plugin.clipboard
来自项目自述文件
“此脚本在调用复制事件之前修改选择的内容，导致复制的选择与用户选择的内容不同。

这允许您将内容附加/添加到选择中，例如版权信息或其他内容。

根据 MIT 许可发布”

Answer 5

对答案进行改进，修改后恢复选择，以防止复制后随机选择。

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');
    var range = selection.getRangeAt(0); // edited according to @Vokiel's comment

    //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);
        selection.removeAllRanges();
        selection.addRange(range);
    }, 100);
}

document.addEventListener('copy', addLink);

Answer 6

2018年的改进

document.addEventListener('copy', function (e) {
    var selection = window.getSelection();
    e.clipboardData.setData('text/plain', $('<div/>').html(selection + "").text() + "\n\n" + 'Source: ' + document.location.href);
    e.clipboardData.setData('text/html', selection + '<br /><br /><a href="' + document.location.href + '">Source</a>');
    e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Example text with <b>bold</b> and <i>italic</i>. Try copying and pasting me into a rich text editor.</p>

Answer 7

还有一个更短的解决方案：

jQuery( document ).ready( function( $ )
    {
    function addLink()
    {
    var sel = window.getSelection();
    var pagelink = "<br /><br /> Source: <a href='" + document.location.href + "'>" + document.location.href + "</a><br />© text is here";
    var div = $( '<div>', {style: {position: 'absolute', left: '-99999px'}, html: sel + pagelink} );
    $( 'body' ).append( div );
    sel.selectAllChildren( div[0] );
    div.remove();
    }



document.oncopy = addLink;
} );

Answer 8

它是上述 2 个答案的汇编 + 与 Microsoft Edge 的兼容性。

我还在最后添加了原始选择的恢复，正如任何浏览器默认情况下所期望的那样。

function addCopyrightInfo() {
    //Get the selected text and append the extra info
    var selection, selectedNode, html;
    if (window.getSelection) {
        var selection = window.getSelection();
        if (selection.rangeCount) {
            selectedNode = selection.getRangeAt(0).startContainer.parentNode;
            var container = document.createElement("div");
            container.appendChild(selection.getRangeAt(0).cloneContents());
            html = container.innerHTML;
        }
    }
    else {
        console.debug("The text [selection] not found.")
        return;
    }

    // Save current selection to resore it back later.
    var range = selection.getRangeAt(0);

    if (!html)
        html = '' + selection;

    html += "<br/><br/><small><span>Source: </span><a target='_blank' title='" + document.title + "' href='" + document.location.href + "'>" + document.title + "</a></small><br/>";
    var 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.
    selectedNode.appendChild(newdiv); // *For the Microsoft Edge browser so that the page wouldn't scroll to the bottom.

    newdiv.innerHTML = html;
    selection.selectAllChildren(newdiv);

    window.setTimeout(function () {
        selectedNode.removeChild(newdiv);
        selection.removeAllRanges();
        selection.addRange(range); // Restore original selection.
    }, 5); // Timeout is reduced to 10 msc for Microsoft Edge's sake so that it does not blink very noticeably.  
}

document.addEventListener('copy', addCopyrightInfo);