URL短链工具复制按钮问题：如何复制带超链接的短链？

问题说明 #

我正在开发一个URL短链工具，使用Formik+Yup处理表单逻辑与校验，借助ClipboardJS实现复制功能。当前点击复制按钮仅能复制短链文本，无法复制可直接跳转的短链地址，导致粘贴到地址栏后无法正常跳转。

当前代码 #

import { useState } from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import ClipboardJS from 'clipboard';
import Shortener from 'your-shortener-library'; // 假设这是你使用的短链生成库

export default function Home() {
    // =========== 初始化短链生成器 ===========
    const shortener = new Shortener({
        target: "https://short.ie/",
        length: 8,
        alphabet: "alphanumeric",
    });

    // =========== Formik 表单逻辑 ===========
    const formik = useFormik({
        initialValues: {
            link: "",
        },
        validationSchema: Yup.object({
            link: Yup.string()
                .matches(
                    /((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/,
                    "Please enter a valid url"
                )
                .required("A URL is required"),
        }),
        onSubmit: (values) => {
            setShortURL(shortener.shorten(values.link));
        },
    });

    const clipboard = new ClipboardJS(".copy-btn");

    const [shortURL, setShortURL] = useState("");

    return (
        <div id="container">
            <div className="header-container">
                <h1 id="header">URL Shortie</h1>
            </div>
            <div className="form-container">
                <form onSubmit={formik.handleSubmit}>
                    <label className="label">
                        {formik.touched.link && formik.errors.link
                            ? formik.errors.link
                            : "Your Long URL"}
                    </label>
                    <input
                        className="input"
                        type="url"
                        name="link"
                        value={formik.values.link}
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        placeholder="Enter your link here"
                        required
                    />

                    <p className="label">Shortened URL HTML Div</p>
                    <div className="input copy">
                        {shortURL ? (
                            shortURL && (
                                <a id="result" href={shortURL.original} target="_blank">
                                    {shortURL.target}
                                </a>
                            )
                        ) : (
                            <a id="result" href="">
                                https://short.ie/
                            </a>
                        )}
                    </div>

                    <label htmlFor="" className="label">
                        Shortened URL HTML Input
                    </label>
                    <input
                        id="shortenedURL"
                        className="input"
                        type="text"
                        value={shortURL ? shortURL.target : "https://short.ie/"}
                        readOnly="readOnly"
                    />

                    <div className="button-container">
                        <input className="submit-btn" type="submit" value="Shorten Url" />

                        <button
                            className="copy-btn"
                            type="button"
                            data-clipboard-action="copy"
                            data-clipboard-target="#result"
                        >
                            <span class="material-symbols-outlined">content_copy</span>
                            Copy
                        </button>
                    </div>
                </form>

                <h1 id="subheader">Previous URLs</h1>
                <div className="previous-urls-container"></div>
            </div>
        </div>
    );
}

问题原因 #

当前复制按钮通过data-clipboard-target="#result"指向<a>标签，ClipboardJS默认会复制该元素的文本内容，但核心需求是复制可直接跳转的短链地址（shortURL.target）。另外，在组件顶层初始化ClipboardJS会导致每次渲染创建新实例，引发潜在冲突问题。

解决方案 #

方案1：直接复制只读输入框的内容（最简单）

修改复制按钮的data-clipboard-target指向存储短链地址的只读输入框#shortenedURL，这样复制的就是纯文本格式的短链URL，粘贴到地址栏可直接跳转：

<button
    className="copy-btn"
    type="button"
    data-clipboard-action="copy"
    data-clipboard-target="#shortenedURL" // 替换为输入框ID
>
    <span class="material-symbols-outlined">content_copy</span>
    Copy
</button>

同时将ClipboardJS的初始化移到useEffect中，避免重复创建实例：

import { useEffect } from 'react';

// ...其他代码

const [shortURL, setShortURL] = useState("");

useEffect(() => {
    const clipboard = new ClipboardJS(".copy-btn");
    return () => clipboard.destroy(); // 组件卸载时销毁实例
}, []);

// ...其他代码

方案2：自定义ClipboardJS复制内容

如果不想依赖输入框，可以通过ClipboardJS的text选项自定义复制内容，同时正确管理实例生命周期：

import { useEffect } from 'react';

// ...其他代码

const [shortURL, setShortURL] = useState("");

useEffect(() => {
    const clipboard = new ClipboardJS(".copy-btn", {
        text: () => shortURL ? shortURL.target : "https://short.ie/"
    });

    return () => clipboard.destroy();
}, [shortURL]); // 短链地址更新时重新初始化实例

// ...复制按钮移除data-clipboard-target属性
<button
    className="copy-btn"
    type="button"
    data-clipboard-action="copy"
>
    <span class="material-symbols-outlined">content_copy</span>
    Copy
</button>

方案3：复制富文本超链接（支持粘贴到富文本编辑器）

如果需要复制带格式的超链接（粘贴到Word、微信等平台可直接点击），可以使用原生Clipboard API实现：

// 替换ClipboardJS相关代码，添加自定义复制函数
const handleCopyRichLink = () => {
    if (!shortURL) return;

    // 构造HTML格式的超链接
    const richText = `<a href="${shortURL.target}">${shortURL.target}</a>`;
    const blob = new Blob([richText], { type: 'text/html' });
    const clipboardItem = new ClipboardItem({ 'text/html': blob });

    navigator.clipboard.write([clipboardItem])
        .then(() => console.log("富文本链接复制成功"))
        .catch(err => console.error("复制失败:", err));
};

// ...复制按钮改用onClick触发
<button
    className="copy-btn"
    type="button"
    onClick={handleCopyRichLink}
>
    <span class="material-symbols-outlined">content_copy</span>
    Copy
</button>

这种方式复制的内容，粘贴到地址栏时浏览器会自动提取URL，粘贴到富文本编辑器时则显示为可点击的超链接。

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