Modify Clipboard content after copy event: JavaScript, jQuery

Question

My requirement: When user copy some content from my web page, with text some HTML tags and carriage retun also gets copied. I need to modify the copied cont

Answer 1

To resolve this issue what I have done on copy event I have bind a function i.e. copyToClipboard which creates a textarea at run time, copy modified clipboard data to this text area and then execute a 'CUT' command (to avoid recursive call on copy event). And finally deleting textarea element in finally block.

Code:

$(document).bind('copy', function () {
            var text = window.getSelection().toString().replace(/[\n\r]+/g, '');
            copyToClipboard(text);
        });

        function copyToClipboard(text) {
                var textarea = document.createElement("textarea");
                textarea.textContent = text;
                textarea.style.position = "fixed";
                document.body.appendChild(textarea);
                textarea.select();
                try {
                    return document.execCommand("cut");
                } catch (ex) {
                    console.warn("Copy to clipboard failed.", ex);
                    return false;
                } finally {
                    document.body.removeChild(textarea);
                }
        }

Answer 2

The currently accepted answer is overly complicated, and causes weird behavior where a user's selection is removed after copy.

Here is a much simpler solution:

document.addEventListener('copy', function(e){
  var text = window.getSelection().toString().replace(/[\n\r]+/g, '');
  e.clipboardData.setData('text/plain', text);
  e.preventDefault();
});

Answer 3

There are two things I can find out.

1. clipboardData object will be in callback object e passed not in window.
2. the correct syntax for setData is like below.

For further reference copy Event MDN

document.addEventListener('copy', function(e) {
  console.log('copied');
  e.clipboardData.setData('text/plain', 'Hello World!');
  e.preventDefault();
});

Answer 4

Bind the element id with copy event and then get the selected text. You could replace or modify the text. Get the clipboard and set the new text. To get the exact formatting you need to set the type as "text/hmtl". You may also bind it to the document instead of element.

         $(ElementId).bind('copy', function(event) {
            var selectedText = window.getSelection().toString(); 
            selectedText = selectedText.replace(/\u200B/g, "");

            clipboardData = event.clipboardData || window.clipboardData || event.originalEvent.clipboardData;
            clipboardData.setData('text/html', selectedText);

            event.preventDefault();
          });