React实现无格式文本复制到剪贴板的方案咨询

你遇到的问题可以通过两种方式解决，确保点击按钮时复制的是无格式纯文本：

方式一：处理富文本为纯文本（若传入的text是带HTML标签的富文本） #

如果你的text属性包含HTML格式标签（比如<b>、<span style="color:white">等），需要先提取其中的纯文本内容再复制：

import React from "react";
import { CopyIcon } from "lucide-react";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { useToast } from "@/hooks/use-toast";

export default function Cod({ text }) {
  const { toast } = useToast();

  // 提取纯文本：处理带HTML的富文本
  const getPlainText = (html) => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, "text/html");
    return doc.body.textContent || "";
  };

  const plainText = getPlainText(text);

  return (
    <div className="flex gap-2 mt-4">
      <pre className="dark:bg-background h-12 place-content-center rounded-md p-2">
        <code className="font-semibold text-foreground">{text}</code>
      </pre>
      <CopyToClipboard text={plainText} onCopy={() => {
        toast({ description: "Copy successful !" });
      }}>
        <button className="hover:bg-background p-1 rounded-md">
          <CopyIcon size={18} />
        </button>
      </CopyToClipboard>
    </div>
  );
}

方式二：使用原生Clipboard API替代第三方组件 #

原生API能更直接地控制复制内容的格式，确保输出纯文本：

import React from "react";
import { CopyIcon } from "lucide-react";
import { useToast } from "@/hooks/use-toast";

export default function Cod({ text }) {
  const { toast } = useToast();

  const handleCopy = async () => {
    try {
      // 使用原生API复制纯文本
      await navigator.clipboard.writeText(text);
      toast({ description: "Copy successful !" });
    } catch (err) {
      console.error("复制失败:", err);
      toast({ description: "Copy failed !" });
    }
  };

  return (
    <div className="flex gap-2 mt-4">
      <pre className="dark:bg-background h-12 place-content-center rounded-md p-2">
        <code className="font-semibold text-foreground">{text}</code>
      </pre>
      <button
        className="hover:bg-background p-1 rounded-md"
        onClick={handleCopy}
      >
        <CopyIcon size={18} />
      </button>
    </div>
  );
}

说明 #

• 方式一适合text是富文本字符串的场景，先解析提取纯文本再复制；
• 方式二直接用原生API，现代浏览器都支持，且完全可控，不会引入第三方组件的潜在格式问题。

内容的提问来源于stack exchange，提问作者Mohsin Abbas