js 实现表情

实现表情的 JavaScript 方法

使用 Unicode 字符直接显示表情
Unicode 包含大量表情符号，可以直接在字符串中使用。例如：

console.log("😊"); // 输出笑脸表情
console.log("👍"); // 输出点赞手势

常用 Unicode 表情范围：U+1F600 到 U+1F64F（表情符号）、U+1F300 到 U+1F5FF（其他符号）。

通过 HTML 实体编码显示表情
在网页中，可以使用 HTML 实体编码插入表情：

document.getElementById("emoji").innerHTML = "😀"; // 渲染为 😀

常用编码参考：HTML Emoji Entities。

使用第三方库动态加载表情

• Twemoji（Twitter 开源库）
  通过 CDN 引入后自动将 Unicode 转为图片：

  

  <script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"></script>
  <script>
    twemoji.parse(document.body); // 转换页面内所有表情
  </script>

• Emoji Mart
  提供表情选择器组件：

  import { Picker } from 'emoji-mart';
  new Picker({ onEmojiSelect: console.log });

自定义表情图片替换
通过正则匹配替换文本中的表情符号为 <img> 标签：

function replaceEmojis(text) {
  const emojiMap = { ":)": "smile.png", ":(": "sad.png" };
  return text.replace(/[:)]|[:\(]/g, match => 
    `<img src="${emojiMap[match]}" alt="${match}">`
  );
}

注意事项

• Unicode 表情在不同系统/字体下的显示可能不一致。
• 移动端输入法自带表情键盘，无需额外实现输入功能。
• 若需兼容旧浏览器，优先使用图片或库方案。