8

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 content in clipboard i.e. removing carriage retunn and HTML tags.

What I have tried so far: I have captured the copy even using jQuery and get the content of clipboard. See below code.

$(document).bind('copy', function () {
      //getting clipboard content
      var selectedText = window.getSelection().toString();

      //removing carriage retun from content
      selectedText = selectedText.replace(/<\/?[^>]+(>|$)/g, "");

      //Trying to set data in clipboard
      window.clipboardData.setData(selectedText); //Throws error
}

Now, when I tried to setData in clipboard using window.clipboardData.setData(selectedText); , it throws error.

Questions:

1) Am I using the correct function i.e. setData() to modify the clipbard content or not?

2) Can somebody let me know how can I modify the content of clipboard here?

Geeky Ninja
  • 5,765
  • 8
  • 35
  • 50
  • 2
    *it throws error.*, giving us the actual error may help us help you ;) – Wesley Smith Feb 07 '17 at 12:21
  • Also, why not update the content where it ends up? For example, why not remove them when the user pastes the content in some input etc... Dealing with the clipboard seems unnecessarily complicated – Wesley Smith Feb 07 '17 at 12:22
  • 2
    *"Throws error"* ... don't you think the error message might be helpful here? – charlietfl Feb 07 '17 at 12:22
  • Take a look at : http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript – Ben Temple-Heald Feb 07 '17 at 12:23
  • **"Unexpected call to method or property access."** this is the error I'm getting. Also, I wanted to check am I using the correct function to update the clipboard content or not? – Geeky Ninja Feb 07 '17 at 12:24
  • @DelightedD0D I only have to update the data in clipboard only and have to done in _copy_ event and not in _paste_ event – Geeky Ninja Feb 07 '17 at 12:26
  • @BenTemple-Heald [http://stackoverflow.com/questions/40021...](http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) is talks about copy the content where as I'm more concerned about modifying the copied content in clipboard. – Geeky Ninja Feb 07 '17 at 12:29
  • @GeekyNinja Hooking onto peoples copies is not really possible due to security considerations, for example, they copy "http://www.google.com" from a text box, you could change that to a JS call, that when they copy it into a browser windows it downloads a virus (if they are not paying attention) A solution, is to add a "copy" button to the end of the box that you want them to copy from, that takes the content, parses it, and then does what I linked (fired off of a button click) – Ben Temple-Heald Feb 07 '17 at 12:31
  • http://stackoverflow.com/questions/2176861/ ? – l2aelba Feb 07 '17 at 12:36

4 Answers4

12

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();
});
Andy H.
  • 386
  • 3
  • 7
8

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);
                }
        }
Geeky Ninja
  • 5,765
  • 8
  • 35
  • 50
4

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();
});
Ashutosh Tripathi
  • 202
  • 3
  • 8
0

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();
          });
Sollymanul Islam
  • 175
  • 1
  • 3