如何用JavaScript实现带删除线样式的文本复制粘贴功能？

要实现粘贴到Chrome搜索栏仍保留删除线的效果，核心要区分纯文本场景和富文本场景的不同需求——Chrome搜索栏只识别Unicode组合字符，不支持HTML/CSS样式，因此需要针对性处理。

方法一：Unicode删除线字符（适配纯文本场景，含Chrome搜索栏） #

给每个字符添加U+0336组合删除线字符，生成的文本本身就带有删除线属性，粘贴到任何支持Unicode的场景都能生效。

// 生成带Unicode删除线的文本
function wrapWithStrikethroughUnicode(text) {
  return text.split('').map(char => char + '\u0336').join('');
}

// 复制到剪贴板
async function copyStrikethroughText(text) {
  const strikethroughText = wrapWithStrikethroughUnicode(text);
  try {
    await navigator.clipboard.writeText(strikethroughText);
    console.log('复制成功');
    return true;
  } catch (err) {
    console.error('复制失败:', err);
    // 降级方案：使用execCommand（兼容HTTP环境）
    const textArea = document.createElement('textarea');
    textArea.value = strikethroughText;
    document.body.appendChild(textArea);
    textArea.select();
    const success = document.execCommand('copy');
    document.body.removeChild(textArea);
    return success;
  }
}

// 调用示例
copyStrikethroughText('你要添加删除线的内容');

优点 #

• 兼容性极强，支持Chrome搜索栏、记事本、微信等所有纯文本输入场景
• 无需依赖HTML/CSS，字符本身带样式

方法二：富文本+Unicode双格式复制（兼顾所有场景） #

如果需要同时支持富文本场景（如Word、网页编辑器）和纯文本场景，可以同时将HTML格式和Unicode格式写入剪贴板，让粘贴目标自动选择适配的格式。

// 生成Unicode删除线文本（复用方法一的函数）
function wrapWithStrikethroughUnicode(text) {
  return text.split('').map(char => char + '\u0336').join('');
}

// 复制富文本+Unicode双格式
async function copyRichStrikethroughText(text) {
  const strikethroughHtml = `<s>${text}</s>`;
  const strikethroughUnicode = wrapWithStrikethroughUnicode(text);

  // 创建剪贴板项，同时包含HTML和纯文本格式
  const clipboardItem = new ClipboardItem({
    'text/html': new Blob([strikethroughHtml], { type: 'text/html' }),
    'text/plain': new Blob([strikethroughUnicode], { type: 'text/plain' })
  });

  try {
    await navigator.clipboard.write([clipboardItem]);
    console.log('复制成功');
    return true;
  } catch (err) {
    console.error('富文本复制失败，降级为纯文本:', err);
    // 降级到纯文本复制
    return copyStrikethroughText(text);
  }
}

// 调用示例
copyRichStrikethroughText('你要添加删除线的内容');

优点 #

• 支持富文本场景显示原生HTML删除线样式
• 纯文本场景自动使用Unicode删除线，确保Chrome搜索栏等场景生效

注意事项 #

• navigator.clipboard API需要HTTPS环境（localhost调试不受限制），HTTP环境需使用document.execCommand('copy')降级
• 部分老旧浏览器可能不支持ClipboardItem，此时会自动降级为纯文本复制

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