Изменение содержимого буфера обмена после события копирования: JavaScript, jQuery

Question

Мое требование: Когда пользователь скопирует некоторый контент с моей веб-страницы, с текстом также скопируются теги HTML и ретрансляция каретки. Мне нужно изменить скопированный контент в буфер обмена, т. Е. Удалить ретрансляцию каретки и теги HTML.

Что я пробовал: Я захватил копию даже с помощью jQuery и получаю содержимое буфера обмена. См. Ниже код.

$(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 
} 

Теперь, когда я попытался УстановитьДанные в буфер обмена с помощью window.clipboardData.setData(selectedText);, он выдает ошибку.

Вопросы:

1) Могу ли я с помощью правильной функции т.е. setData() изменить содержание clipbard или нет?

2) Кто-нибудь может сообщить мне, как я могу изменить содержимое буфера обмена здесь?

Answer 1

Чтобы решить эту проблему, что я сделал на copy случае я связать функцию т.е. copyToClipboard, которая создает textarea во время выполнения, скопируйте измененные данные из буфера обмена в этом тексте а затем выполните команду CUT (чтобы избежать рекурсивного вызова события копирования). И, наконец, удаление элемента textarea в блоке finally.

Код:

$(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

Есть две вещи, которые я могу узнать.

1. объект clipboardData будет объект обратного вызова e передается не в window.
2. правильный синтаксис для setData, как показано ниже.

Для дальнейшей ссылки copy Event MDN

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

Answer 3

Свяжите идентификатор элемента с событием копирования, а затем получить выделенный текст. Вы можете заменить или изменить текст. Получите буфер обмена и установите новый текст. Чтобы получить точное форматирование, вам нужно установить тип как «text/hmtl». Вы также можете привязать его к документу вместо элемента.

  $(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(); 
      });