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

Remove Styles from Text when Copying / Cutting using CSS or Javascript

本文关键字：文本 样式 删除 CSS Javascript 复制 使用      更新时间：2023-09-26

>Yo，

好吧，这个问题已经喋喋不休了一段时间：如何在不带任何样式包袱(背景颜色、颜色等(的情况下复制/剪切样式文本？

被挫败的几种攻击途径：

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

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

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

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

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

步骤：

  1. 处理 Ctrl-C 和 Ctrl-X 键盘快捷键以及 Mac 等效项。
  2. 在此处理程序中，创建一个屏幕外元素(例如绝对位置和左 -10000px(并将所选内容复制到其中。您可以使用 window.getSelection().getRangeAt(0).cloneContents() 执行此操作，尽管您需要为 IE <9 提供单独的代码，并且您应该检查选择是否折叠。
  3. 执行任何您喜欢的操作来更改屏幕外元素内容的样式。
  4. 移动所选内容以包含屏幕外元素的内容，以便剪切或复制此内容。
  5. 添加用于window.setTimeout()的短暂延迟(几毫秒(，该延迟调用删除屏幕外元素并恢复原始选择的函数。

你需要在浏览器中发生这种情况吗？对于每个用户？

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

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

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

一旦你触发了复制或剪切，你可以去除html标签，只去除带有一些正则表达式的文本

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

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

相关文章：