使用copyToClipboard复制textarea内容时文本在引号前截断的解决办法

这个问题的核心原因是你错误地使用了innerHTML来获取textarea的内容——textarea作为表单输入控件，它的文本内容应该通过value属性来读取，而非innerHTML。当内容里包含双引号时，innerHTML会把它当作HTML属性的结束标记，直接导致内容被意外截断。

修复后的JavaScript代码 #

把你原代码里的这一行：

aux.setAttribute("value", document.getElementById(elementId).innerHTML);

替换成：

aux.setAttribute("value", document.getElementById(elementId).value);

完整的修复后函数如下：

function copyToClipboard(elementId) {
    // 创建一个临时input
    var aux = document.createElement("input");
    // 读取目标textarea的value值赋值给input
    aux.setAttribute("value", document.getElementById(elementId).value);
    // 将input添加到页面
    document.body.appendChild(aux);
    // 选中input内的文本
    aux.select();
    // 执行复制操作
    document.execCommand("copy");
    // 移除临时input
    document.body.removeChild(aux);
}

额外优化建议（可选） #

现在document.execCommand("copy")已被标记为废弃，推荐使用更现代的Clipboard API，代码更简洁且兼容性更好：

function copyToClipboard(elementId) {
    const textarea = document.getElementById(elementId);
    navigator.clipboard.writeText(textarea.value)
        .then(() => {
            // 这里可以添加复制成功的提示，比如修改按钮文字
            const button = event.target;
            button.textContent = "已复制！";
            setTimeout(() => button.textContent = "Copy general text", 2000);
        })
        .catch(err => {
            console.error("复制失败:", err);
        });
}

使用这个方法不需要创建额外的input元素，还能完美处理包含引号、特殊字符的文本内容。另外，你的按钮上设置的data-clipboard-text属性如果没有搭配Clipboard.js库使用，其实是多余的，可以移除避免混淆。

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