找Emoji太麻烦了

你发消息的时候想用一个表情，但在几百个Emoji里翻来翻去就是找不到。或者你知道想要一个"竖大拇指"的表情，但不知道它藏在哪个分类里。

今天我们做一个Emoji搜索工具——输入中文关键词，立刻显示相关的Emoji，点击就复制到剪贴板。

第一步：准备Emoji数据

我们需要一个Emoji列表，包含每个Emoji的符号和中文描述。创建一个数据文件：

var emojiData = [
{ emoji: "\ud83d\ude00", tags: "笑 开心 高兴 哈哈" },
{ emoji: "\ud83d\ude02", tags: "笑哭 好笑 哈哈哈" },
{ emoji: "\ud83e\udd70", tags: "喜欢 爱 心 可爱" },
{ emoji: "\ud83d\ude0d", tags: "爱心眼 喜欢 爱" },
{ emoji: "\ud83d\ude09", tags: "眨眼 调皮 俏皮" },
{ emoji: "\ud83d\ude0e", tags: "墨镜 酷 帅" },
{ emoji: "\ud83d\ude22", tags: "哭 难过 伤心 委屈" },
{ emoji: "\ud83d\ude21", tags: "生气 愤怒 火大" },
{ emoji: "\ud83d\udc4d", tags: "赞 棒 好 大拇指 点赞" },
{ emoji: "\ud83d\udc4e", tags: "踩 差 不好 大拇指向下" },
{ emoji: "\ud83d\udc4b", tags: "挥手 你好 再见 拜拜" },
{ emoji: "\ud83d\ude4f", tags: "祈祷 拜托 谢谢 感谢" },
{ emoji: "\u2764\ufe0f", tags: "爱心 红心 喜欢 爱" },
{ emoji: "\ud83d\udd25", tags: "火 热 火爆 厉害" },
{ emoji: "\u2b50", tags: "星星 收藏 闪亮" },
{ emoji: "\ud83c\udf89", tags: "庆祝 派对 恭喜" },
{ emoji: "\ud83c\udf1f", tags: "闪亮 星星 优秀" },
{ emoji: "\ud83d\udcaa", tags: "肌肉 加油 力量 强" },
{ emoji: "\ud83c\udf39", tags: "玫瑰 花 浪漫" },
{ emoji: "\u2615", tags: "咖啡 下午茶 休息" }
];

实际使用时，你可以把这个列表扩展到几百个常用Emoji。

第二步：创建页面

Emoji 搜索工具

placeholder="输入关键词搜索，如：开心、火、爱心"
oninput="search()" />

第三步：实现搜索和复制功能

function search() {
var keyword = document.getElementById("search")
.value.trim().toLowerCase();
var grid = document.getElementById("grid");

var filtered = emojiData;
if (keyword) {
filtered = emojiData.filter(function(item) {
return item.tags.indexOf(keyword) > -1;
});
}

var html = "";
for (var i = 0; i < filtered.length; i++) {
html += "

";
}
grid.innerHTML = html || "

没有找到相关Emoji

";
}

function copy(emoji) {
navigator.clipboard.writeText(emoji);
var toast = document.getElementById("toast");
toast.style.display = "block";
setTimeout(function() {
toast.style.display = "none";
}, 1500);
}

// 页面加载时显示所有Emoji
search();

核心逻辑很简单：用户输入关键词后，遍历Emoji数据，找到tags里包含关键词的Emoji显示出来。点击Emoji就复制到剪贴板，并显示一个"已复制"的提示。

第四步：加上分类浏览

可以在搜索框下面加几个分类按钮：

var categories = [
{ name: "全部", keyword: "" },
{ name: "表情", keyword: "笑 哭 生气" },
{ name: "手势", keyword: "赞 拜 挥手" },
{ name: "爱心", keyword: "爱 心 喜欢" },
{ name: "自然", keyword: "花 星 火" }
];

点击分类按钮时，把对应的关键词填入搜索框触发搜索。

怎么扩展Emoji数据

手动添加太累了，可以让AI帮忙：

请帮我生成100个常用Emoji的数据，
格式为 { emoji: "表情符号", tags: "中文标签 用空格分隔" }，
涵盖表情、手势、动物、食物、天气、物品等分类。

AI生成的数据复制进来就能用。

总结

这个工具虽然小，但非常实用。做完之后你可以把它部署到网上，每次需要Emoji的时候打开搜一下，比在手机键盘上翻方便多了。而且这个项目练习了搜索过滤、复制到剪贴板、CSS Grid布局等常用技能。