如何使用JavaScript从textarea获取emoji并在字典对象中查询

你遇到的问题核心是大部分Emoji属于Unicode多码元字符：

• 普通ASCII字符只占1个UTF-16码元，用charAt(i)可以直接拿到完整字符
• 大部分Emoji的Unicode码点超过U+FFFF，由2个UTF-16代理码元组成，部分带修饰符、ZWJ（零宽连接符）的Emoji（比如你密码本里的👩‍🎓、👁️）甚至由3-4个UTF-16码元组成
• 原来的charAt(i)是按UTF-16码元遍历，每次只能拿到半个Emoji，自然无法匹配密码本中的完整字符

HTML部分无需修改，仅需替换JS逻辑即可，修复后完整代码如下：

const cipher = {
  "👏": "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"
}

function convert(){
  const input = document.getElementById("input").value.normalize('NFC');
  const outputTextarea = document.getElementById("output");
  let output = "";
  console.clear();
  for (const char of Array.from(input)) {
    output += cipher[char] ?? char;
  }
  outputTextarea.value = output;
}

改动说明 #

1. 新增normalize('NFC')对输入做Unicode归一化，解决同一个Emoji存在不同编码序列导致的匹配失败问题
2. 用Array.from(input)将输入字符串拆分为完整Unicode字符数组，自动识别代理对、ZWJ组合Emoji，保证每次取到的都是完整的Emoji字符
3. 用??简化匹配逻辑，匹配不到就保留原字符（比如空格、换行）

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