How to Add Extra Info to Copied Web Text

How to add extra info to copied web text

2022 Update

More complex solution that handles rich text formatting. The 2020 solution is still relevant if you only deal with plain text.

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>

Add extra info (copyright notice/read more link) to copied text and preserve formatting (line breaks and color)

The selection is being copied as plain text, to preserve the line breaks and formatting, you must get the selected text as HTML.

JSFiddle demo here

JavaScript code:

function addLink() {
    var selection = window.getSelection();

    var htmlDiv = document.createElement("div");
    for (var i = 0; i < selection.rangeCount; ++i) {
        htmlDiv.appendChild(selection.getRangeAt(i).cloneContents());
    }
    var selectionHTML = htmlDiv.innerHTML;

    var pagelink = "<br/><br/>Read more: http://www.stackoverflow.com/ <br/>";
    var copytext = selectionHTML + pagelink;

    var newdiv = document.createElement('div');
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';

    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout(function () { document.body.removeChild(newdiv); }, 0);
}
document.oncopy = addLink;

Injecting text when content is copied from a web page

Suite101 is using a 3rd party service called Tynt.

Tynt's JavaScript snippet is located at http://tcr.tynt.com/javascripts/Tracer.js

I explored the source for you (with some help from the Online JavaScript beautifier).

So here's what's happening:

• the code activates on events like mouseup, mousedown, and copy (in the startListeningForTraces function)
• if the user selected a range of text, then it:
  
  
  • creates the HTML for an attribution link, plus optional CC license URL
  • appends this HTML to the selection, placing it inside a zero-size <div> (to keep it invisible on-screen)
  • reports what was copied back to Tynt's servers

Tynt's code does a tremendous amount of work to make this work seamlessly across browsers.

How would I add my own blurb to text that users copy and paste from my website?

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 />Source: <a href="' + document.location.href + '">' + document.title + '</a>');
     e.preventDefault();
});

I found this on How to add extra info to copied web text

Is this what you are looking for?

Ctrl + C copy webpage text - copy extra data to clipboard

Just a quick Google search result.

<script type="text/javascript">
function addLink() {
    var body_element = document.getElementsByTagName('body')[0];
    var selection;
    selection = window.getSelection();
    var pagelink = "<br /><br /> Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a><br />Copyright © c.bavota"; // change this if you want
    var copytext = selection + pagelink;
    var newdiv = document.createElement('div');
    newdiv.style.position='absolute';
    newdiv.style.left='-99999px';
    body_element.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout(function() {
        body_element.removeChild(newdiv);
    },0);
}
document.oncopy = addLink;
</script>

As you can see, it binds on oncopy event.

---

Related Topics