如何在使用document.execCommand("copy")时移除选中文本的空格和换行？

我帮你排查下原代码里的几个关键问题，再给你两个可用的解决方案～

原代码的核心问题 #

1. Selection对象转字符串错误：document.getSelection()返回的是Selection对象，不是纯文本，必须用.toString()转成字符串后才能调用replace方法。
2. 复制命令用法错误：document.execCommand("copy")是执行复制命令的方法，它返回布尔值表示是否执行成功，不能直接给它赋值.value，正确的复制逻辑需要先让目标文本处于选中状态再执行命令。
3. 冗余的IE兼容代码：现在主流浏览器都支持标准Selection API，没必要保留document.all这类老旧写法。
4. 无选中文本判断：鼠标松开就触发函数，哪怕没选中文本也会执行，容易造成无效操作。

方案一：使用现代Clipboard API（推荐） #

这是现在浏览器官方推荐的剪切板操作方式，代码更简洁，不需要创建临时元素：

let selectedText = "";

function handleCopyOnSelect(e) {
  // 获取选中文本并转为字符串
  selectedText = window.getSelection().toString();
  // 没有选中文本直接返回
  if (!selectedText.trim()) return;
  
  // 移除所有空格、换行、制表符等空白字符
  const cleanedText = selectedText.replace(/\s+/g, '');
  
  // 写入剪切板
  navigator.clipboard.writeText(cleanedText)
    .then(() => {
      console.log("处理后的文本已复制：", cleanedText);
    })
    .catch(err => {
      console.error("复制失败：", err);
    });
}

// 绑定鼠标松开事件（选中文本后松开鼠标自动复制）
document.addEventListener('mouseup', handleCopyOnSelect);

注意：

• 该API要求网站处于HTTPS协议下（本地开发的localhost除外），否则会触发权限错误。

方案二：兼容旧浏览器的execCommand方式 #

如果需要支持IE11这类老旧浏览器，可以用这种创建临时元素的方式：

let selectedText = "";

function handleCopyOnSelect(e) {
  selectedText = window.getSelection().toString();
  if (!selectedText.trim()) return;
  
  const cleanedText = selectedText.replace(/\s+/g, '');
  
  // 创建临时textarea存放处理后的文本
  const tempTextarea = document.createElement('textarea');
  tempTextarea.value = cleanedText;
  // 把元素放到视野外，避免干扰页面
  tempTextarea.style.position = 'absolute';
  tempTextarea.style.left = '-9999px';
  document.body.appendChild(tempTextarea);
  
  // 选中文本并执行复制
  tempTextarea.select();
  document.execCommand('copy');
  
  // 清理临时元素
  document.body.removeChild(tempTextarea);
  
  console.log("处理后的文本已复制：", cleanedText);
}

document.addEventListener('mouseup', handleCopyOnSelect);

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