实现文本拷贝时保留段落样式

type

status

date

slug

summary

category

icon

password

今天收到也无妨反馈，直接点击站点上的文本拷贝按钮时，拷贝结果出现以下问题：

拷贝后，在富文本编辑内粘贴，文字携带背景色

拷贝后，文本内容包含HTML元素标签

拷贝后，无法保持页面上的展示的段落样式

查看项目源码之后，发现原本使用的是react-copy-to-clipboard,代码如下：

再审查页面元素时，看到结构大概如下：

很明显，拷贝的元素对象内，包含<br>标签，而<br>在HTML中渲染会换行，从而显示段落效果。

先看第一个问题「拷贝后，在富文本编辑内粘贴，文字携带背景色」。在查看了react-copy-to-clipboard 的文档后，发现可以配置`option.format`参数，参数值是`MIME type`，可以通过设置`option.format = “text/plain”`来解决问题。

String. Optional. Set the MIME type of what you want to copy as. Use text/html to copy as HTML, text/plain to avoid inherited styles showing when pasted into rich text edito

再看第二个问题「拷贝后，文本内容包含HTML元素标签」。如上述分析，因为元素内包含了HTML标签元素，不管是通过`innerHTML`还是`innerText`，必然都会携带文本内的标签元素（因为此时标签被当作普通字符来获取）。

很简单，我们写一个正则匹配来将标签过滤就好了。

第二个问题虽然解决了，但同时我们也丢失了文本段落样式，查看了react-copy-to-clipboard 之后，确定没有相关配置可以解决，所以只能放弃该组件。

自己写了一个方法：

也可以这样：

通过以上方法，就可以完全解决问题。

💡

document.execCommand 和 navigator.clipboard.writeText 可能存在兼容性问题