如何在JavaScript/jQuery中将表情符号转换为纯文本

关于Unicode表情的标准映射 #

没有官方统一的标准字符串映射，因为😊→:)这类文本符号属于社区约定的非正式写法，不同平台、场景的映射可能略有差异，但存在一套广泛被认可的常用映射集合，你可以基于这套集合自定义或扩展。

JavaScript/jQuery实现方案 #

核心思路是监听输入事件，实时替换文本中的表情符号为对应文本，同时处理光标位置避免用户体验下降。

1. 定义常用表情映射表 #

你可以根据需求扩展更多表情：

const emojiMap = new Map([
  ['😊', ':)'],
  ['😀', ':D'],
  ['😂', ':joy:'],
  ['😢', ':('],
  ['😠', '>:('],
  ['😍', ':-*'],
  // 可继续添加更多表情与对应文本的映射
]);
// 生成匹配表情的正则表达式
const emojiRegex = new RegExp(Array.from(emojiMap.keys()).map(escapeRegExp).join('|'), 'g');

// 辅助函数：转义正则特殊字符
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

2. 原生JavaScript实现 #

使用input事件（比keyup更可靠，能覆盖移动端插入表情、粘贴内容等场景），同时处理光标位置：

const textarea = document.getElementById('my-field');

textarea.addEventListener('input', function() {
  const cursorPos = this.selectionStart;
  const originalValue = this.value;
  
  // 替换文本中的表情
  const newValue = originalValue.replace(emojiRegex, match => emojiMap.get(match));
  
  // 仅在内容变化时更新，避免无效操作
  if (newValue !== originalValue) {
    this.value = newValue;
    // 恢复光标位置：计算替换后的偏移量
    const diff = newValue.length - originalValue.length;
    this.selectionStart = this.selectionEnd = cursorPos + diff;
  }
});

3. jQuery实现 #

逻辑与原生一致，适配jQuery写法：

$('#my-field').on('input', function() {
  const cursorPos = this.selectionStart;
  const originalValue = $(this).val();
  
  const newValue = originalValue.replace(emojiRegex, match => emojiMap.get(match));
  
  if (newValue !== originalValue) {
    $(this).val(newValue);
    const diff = newValue.length - originalValue.length;
    this.selectionStart = this.selectionEnd = cursorPos + diff;
  }
});

注意事项 #

• 若需要覆盖更多表情，只需在emojiMap中添加对应的键值对即可。
• input事件能响应所有输入场景，包括移动端软键盘插入表情、粘贴含表情的内容等，比keyup更适配需求。
• 光标位置处理是关键，否则每次替换表情后光标会跳到文本末尾，影响用户输入流畅度。

内容的提问来源于stack exchange，提问作者J.BizMai