使用 CSS 或 JavaScript 复制/剪切时从文本中删除样式

Question

如何在不携带任何样式包袱（背景颜色、颜色等）的情况下复制/剪切样式文本？

已挫败的攻击路线：

1. 使用 ::select 设置不同的文本样式？ 不起作用，::style 未被复制
2. 使用 jQuery 的选择绑定设置所选文本的样式这只适用于输入，不适用于 p、div
3. 通过绑定事件来使用 jQuery 进行复制/粘贴来拦截和删除样式？无法访问复制的对象来删除内容，请尝试使用 e.preventDefault();然后返回事件对象，但这也不起作用
4. 保存剪贴板数据后要修改它吗？也没有骰子，大多数浏览器不会让你在没有Flash和某种确认的情况下进入此

无论如何，有什么想法吗？看起来这对于具有白色背景颜色的网站非常有用。

Answer 1

考虑到当前的浏览器功能，您可以拦截复制事件，获取不带样式的选择，并将其放入剪贴板。

我已经使用 Chrome/Safari/Firefox 测试了此代码。 相信它也应该适用于 MS 浏览器。

document.addEventListener('copy', function(e) {
  const text_only = document.getSelection().toString();
  const clipdata = e.clipboardData || window.clipboardData;  
  clipdata.setData('text/plain', text_only);
  clipdata.setData('text/html', text_only);
  e.preventDefault();
});

Answer 2

我现在没有时间编写示例，但是您可以通过键盘快捷键触发剪切/复制来执行此操作。它不适用于通过上下文菜单或编辑菜单选项进行剪切/复制，因为它依赖于在剪切或复制事件触发之前更改用户选择。

步骤：

1. 处理 Ctrl-C 和 Ctrl-X 键盘快捷键以及 Mac 等效项。
2. 在此处理程序中，创建一个离屏元素（例如，绝对位置和左侧 -10000px）并将所选内容复制到其中。您可以使用

   window.getSelection().getRangeAt(0).cloneContents()

   来完成此操作，尽管您需要单独的 IE 代码 < 9 and you should check the selection is not collapsed.
3. 做任何你喜欢做的事情来改变屏幕外元素内容的样式。
4. 移动选区以包含屏幕外元素的内容，以便剪切或复制该内容。
5. 使用

   window.setTimeout()

   添加短暂的延迟（几毫秒），调用删除屏幕外元素并恢复原始选择的函数。

Answer 3

您是否需要在浏览器中为每个用户执行此操作？

如果不 - 而且它只适合您 - 那么您可以使用 Clipmate 软件来完成此操作。

http://www.clipmate.com/index.htm

它有一个功能，可以删除所有样式。

Answer 4

触发复制或剪切后，您可以删除 html 标签，只删除带有某些正则表达式的文本

var String = Sample.replace(/(<([^>]+)>)/ig,"");

此外，如果您将存储的文本存储在 ID 为“sample_div”的 div 中 使用

var String=$('sample_div').text('');

仅获取里面的文本