HTML 无法实现 emoji 分类搜索，必须用 JavaScript 构建轻量词典，通过 keywords 和 category 字段匹配中文关键词，并用 textContent 实时过滤 DOM 元素。
HTML 本身不能实现 emoji 分类搜索，必须配合 JavaScript；纯 HTML + CSS 只能静态展示，搜不了、分不了类。
为什么 input 搜索框直接匹配 emoji 文本会失败
emoji 在 DOM 中常以 Unicode 序列（如 U+1F602）或短码（如 :joy:）形式存在，但用户输入时往往打的是中文关键词（“笑”“猫”“旗”），不是 emoji 本身。直接用 includes() 或 indexOf() 去比对 emoji 字符串，99% 的情况匹配不到。
- 用户搜“笑脸”，实际要命中
?、?、?等，得靠预定义的分类标签或别名映射 - 不同平台渲染的 emoji 可能略有差异（比如苹果 vs 安卓的 ?），但分类逻辑应与渲染解耦
- 浏览器原生不提供 emoji 语义索引，必须自己建轻量级“emoji 词典”
用 emoji-datasource 或手动维护分类映射表
推荐用轻量方案：不引入整套 emoji-datasource（体积大、API 重），而是摘取其核心字段，构建一个扁平 JS 对象，每个 emoji 对应 keywords 和 category：
const emojiDB = [
{ emoji: "?", name: "grinning face", keywords: ["face", "smile", "happy"], category: "smileys" },
{ emoji: "?", name: "cat", keywords: ["animal", "pet", "cat"], category: "animals" },
{ emoji: "?", name: "triangular flag", keywords: ["flag", "signal", "banner"], category: "objects" }
];
注意：keywords 要覆盖口语化表达（如“猫”“小猫”“喵”可统一收进 ["cat", "kitten", "meow"]），但别堆太多——影响搜索响应速度和内存占用。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 避免用正则全局模糊匹配
keywords，改用some(k => input.includes(k) || k.includes(input))更可控 - 分类字段
category值建议固定为英文小写（如"smileys"、"food"），方便 CSS 类名绑定和筛选切换 - 不要把整个 emojiDB 放在 HTML 里内联，建议作为模块
import或单独<script type="module">加载
filter() + textContent 实时过滤 DOM 列表
假设你用 <div class="emoji-grid"> 包着一堆 <span class="emoji-item" data-category="smileys">?</span>，搜索逻辑就非常直接：
const searchInput = document.querySelector("#search");
const items = document.querySelectorAll(".emoji-item");
searchInput.addEventListener("input", () => {
const q = searchInput.value.trim().toLowerCase();
items.forEach(item => {
const emoji = item.textContent;
const match = emojiDB.find(e => e.emoji === emoji);
const hits = q ? (
match?.keywords.some(k => k.includes(q) || q.includes(k)) ||
match?.category.includes(q)
) : true;
item.style.display = hits ? "inline-flex" : "none";
});
});
关键点：
- 别用
innerHTML提取 emoji —— 容易被转义或混入空格；textContent最可靠 - 搜索不区分大小写，但
keywords本身存小写，避免每次调用toLowerCase() - 如果列表超过 200 个 emoji，加
debounce（50ms 延迟）防卡顿，否则输入抖动明显 - 不建议用
display: none隐藏——会导致布局跳动；可改用visibility: hidden+pointer-events: none保持网格结构稳定
真正麻烦的从来不是“怎么显示 emoji”，而是“用户到底想搜什么”。有人输“ok”，有人输“?”，还有人输“对勾”“手势”“赞”，这些语义边界得靠人工校验补全，自动聚类目前还不靠谱。
