Question

哟，

好一直在这个问题上涂鸦了一段时间：如何复制/剪切样式文字而不带任何款式行李（背景颜色，颜色等）？

一些被挫败的攻击路线：

使用:: select？不同地设置文本样式 不起作用，::样式未复制
使用jQuery的选择绑定设置所选文本的样式 这仅适用于输入，而非p，div
通过使用jQuery绑定要复制/粘贴的事件来拦截和删除样式？ 无法访问复制的对象以删除内容，尝试使用e.preventDefault（）;然后返回事件对象，但这不起作用
修改剪贴板数据一旦保存？ 也没有骰子，大多数浏览器都不会让你进入这个没有闪存和某种确认

无论如何，想法？对于具有白色背景颜色的网站来说，它似乎非常有用。

Answer 1

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

步骤：

处理 Ctrl - C 和 Ctrl - X 键盘快捷键和Mac等价物。
在此处理程序中，创建一个离屏元素（绝对位置，左边-10000px，比如说）并将所选内容复制到其中。您可以使用window.getSelection().getRangeAt(0).cloneContents()执行此操作，但您需要单独的IE代码＆lt; 9，你应该检查选择是否已折叠。
做任何你喜欢的事情来改变离屏元素内容的样式。
移动选区以包含离屏元素的内容，以便剪切或复制此内容。
使用window.setTimeout()添加一个短暂的延迟（几毫秒），调用一个删除屏幕外元素并恢复原始选择的函数。

Answer 2

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

如果不 - 它只适合您 - 那么您可以使用Clipmate软件执行此操作。

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

它具有删除所有样式的功能。

Answer 3

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

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

此外，如果您将存储的文本存储在ID为“sample_div”的div中使用var String=$('sample_div').text('');仅获取

中的文字

Answer 4

鉴于当前的浏览器功能，您可以拦截复制事件，获取没有样式的选择，然后将其放入剪贴板。

我已经在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();
});

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

4 个答案: