如何编辑变量中的带格式文本并替换其中超链接写入剪贴板？

原代码问题分析 #

你的代码存在两个核心问题：

1. window.getSelection() 返回的是Selection 选区对象，而非纯字符串，直接调用.replace()方法会抛出类型错误
2. clipboardData.setData 不止支持纯文本写入，你只用到了text/plain类型，额外传入text/html类型即可写入带格式的富文本内容

方案1：仅替换纯文本内容 #

如果不需要保留原文本格式，只需要替换纯文本中的链接，修正后的代码如下：

document.addEventListener('copy', function(e) {
  // 调用toString()拿到选中内容的纯文本
  const selectedText = window.getSelection().toString();
  // 正则加g修饰符实现全局匹配所有符合规则的链接
  const modifiedText = selectedText.replace(/https:\/\/google/g, 'google');
  // 阻止默认复制行为，写入修改后的内容
  e.preventDefault();
  e.clipboardData.setData('text/plain', modifiedText);
});

方案2：保留原格式替换超链接 #

如果需要保留原有文本的格式（字体、样式、其他链接等），需要先读取选区的HTML结构，替换对应链接后同时写入纯文本和富文本到剪贴板：

document.addEventListener('copy', function(e) {
  const selection = window.getSelection();
  // 没有选中内容直接返回
  if (selection.rangeCount === 0) return;

  // 提取选中内容的HTML结构
  const container = document.createElement('div');
  for (let i = 0; i < selection.rangeCount; i++) {
    container.appendChild(selection.getRangeAt(i).cloneContents());
  }
  let htmlContent = container.innerHTML;
  // 替换HTML中a标签的href属性和显示文本
  htmlContent = htmlContent.replace(/href="https:\/\/google[^"]*"/g, 'href="google"');
  htmlContent = htmlContent.replace(/>https:\/\/google[^<]*</g, '>google<');
  // 同步生成修改后的纯文本内容
  const plainText = selection.toString().replace(/https:\/\/google/g, 'google');

  e.preventDefault();
  // 同时写入两种格式，适配不同粘贴场景
  e.clipboardData.setData('text/plain', plainText);
  e.clipboardData.setData('text/html', htmlContent);
});

核心注意点 #

• 正则匹配时添加g修饰符，可全局替换所有符合规则的链接，避免只替换第一个匹配项
• 同时写入text/plain和text/html两种格式时，粘贴到纯文本场景（记事本、输入框等）会自动用纯文本内容，粘贴到富文本场景（Word、富文本编辑器等）会自动用带格式的HTML内容

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