如何用JavaScript实现带字体样式的文本复制功能？

你提到的“带样式文本复制”，本质是将普通字符替换为Unicode特殊变种字符（比如𝖘𝖙𝖆𝖈𝖐𝖔𝖛𝖊𝖗𝖋𝖑𝖔𝖜这类字符），社交平台（Instagram、WhatsApp等）原生支持这些字符的显示，所以复制的是字符本身，而非CSS样式。下面是完整实现方案：

核心思路 #

1. 建立普通ASCII字符到对应花式Unicode字符的映射表
2. 将目标文本替换为花式字符
3. 使用Clipboard API实现复制功能

完整代码实现 #

<div class="canvas" id="canvasid">welcome</div>
<button onclick="copyFancyText()">Copy</button>

<script>
// 示例：普通字符到黑体变种字符的映射（可扩展其他样式）
const fancyCharMap = {
  'a': '𝖆', 'b': '𝖇', 'c': '𝖈', 'd': '𝖉', 'e': '𝖊', 'f': '𝖋', 'g': '𝖌', 'h': '𝖍', 'i': '𝖎', 'j': '𝖏',
  'k': '𝖐', 'l': '𝖑', 'm': '𝖒', 'n': '𝖓', 'o': '𝖔', 'p': '𝖕', 'q': '𝖖', 'r': '𝖗', 's': '𝖘', 't': '𝖙',
  'u': '𝖚', 'v': '𝖛', 'w': '𝖜', 'x': '𝖝', 'y': '𝖞', 'z': '𝖟',
  'A': '𝕬', 'B': '𝕭', 'C': '𝕮', 'D': '𝕯', 'E': '𝕰', 'F': '𝕱', 'G': '𝕲', 'H': '𝕳', 'I': '𝕴', 'J': '𝕵',
  'K': '𝕶', 'L': '𝕷', 'M': '𝕸', 'N': '𝕹', 'O': '𝕺', 'P': '𝕻', 'Q': '𝕼', 'R': '𝕽', 'S': '𝕾', 'T': '𝕿',
  'U': '𝖀', 'V': '𝖁', 'W': '𝖂', 'X': '𝖃', 'Y': '𝖄', 'Z': '𝖅',
  '0': '𝟎', '1': '𝟏', '2': '𝟐', '3': '𝟑', '4': '𝟒', '5': '𝟓', '6': '𝟔', '7': '𝟕', '8': '𝟖', '9': '𝟗',
  ' ': ' '
};

function convertToFancyText(text) {
  return text.split('').map(char => fancyCharMap[char] || char).join('');
}

async function copyFancyText() {
  const originalText = document.getElementById('canvasid').textContent;
  const fancyText = convertToFancyText(originalText);
  
  try {
    await navigator.clipboard.writeText(fancyText);
    alert('花式文本已复制！');
  } catch (err) {
    // 降级方案：兼容旧浏览器
    const textArea = document.createElement('textarea');
    textArea.value = fancyText;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    alert('花式文本已复制！');
  }
}
</script>

说明 #

• 映射表fancyCharMap可扩展更多样式（比如斜体、手写体等），只需添加对应Unicode字符即可
• 使用navigator.clipboard.writeText实现现代浏览器的复制，同时保留传统execCommand作为降级方案
• 复制后的文本是纯Unicode字符，可直接粘贴到任何支持Unicode的平台（包括Instagram、WhatsApp）

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