本文介绍如何替代 indexOf()，使用现代 JavaScript 方法（如 includes()、startsWith()、includes() 配合正则或 some()）对 FullCalendar 的 eventRender 回调中事件字段进行关键词模糊匹配，提升搜索体验与代码可维护性。
本文介绍如何替代 `indexof()`，使用现代 javascript 方法（如 `includes()`、`startswith()`、`includes()` 配合正则或 `some()`）对 fullcalendar 的 `eventrender` 回调中事件字段进行关键词模糊匹配，提升搜索体验与代码可维护性。
在 FullCalendar 的 eventRender 回调中，常需根据用户输入动态过滤事件（例如通过 搜索 event.number 字段）。原方案使用 ['', event.number].indexOf($('#number').val()) >= 0 实现“精确匹配或空值放行”，但存在明显局限：它仅支持完全相等匹配，无法满足“包含子串”“忽略大小写”“多关键词匹配”等常见搜索需求。
✅ 推荐替代方案（无需 indexOf）
1. 基础子串匹配：String.prototype.includes()
eventRender: function(event, element, view) {
const searchTerm = $('#number').val().trim();
// 若搜索框为空，显示所有事件；否则仅保留 number 字段包含该子串的事件
return searchTerm === '' || String(event.number).includes(searchTerm);
}
✅ 优势：语义清晰、原生支持、自动处理 null/undefined → 转为 "null"/"undefined" 后再判断（故建议显式 String() 转换确保安全）
2. 多关键词匹配（推荐用于标签/分类场景）
若 event.number 存储的是逗号分隔的关键词字符串（如 "urgent,meeting,remote"），应先解析为数组，再用 some() 判断：
eventRender: function(event, element, view) {
const searchTerm = $('#number').val().trim();
if (searchTerm === '') return true;
// 安全解析 keywords 数组（避免 JSON.parse 报错）
const keywords = Array.isArray(event.number)
? event.number
: String(event.number).split(',').map(k => k.trim()).filter(k => k);
return keywords.some(keyword =>
keyword.toLowerCase().includes(searchTerm.toLowerCase())
);
}
3. 更强灵活性：正则匹配（支持模糊、通配、忽略大小写）
eventRender: function(event, element, view) {
const searchTerm = $('#number').val().trim();
if (searchTerm === '') return true;
try {
const regex = new RegExp(searchTerm.replace(/[.*+?^${}()|[]\]/g, '\$&'), 'i');
return regex.test(String(event.number));
} catch (e) {
console.warn('Invalid regex pattern:', searchTerm, e);
return false;
}
}
⚠️ 注意：此方式将用户输入转为正则字面量，已对特殊字符自动转义，兼顾安全性与功能（如输入 cli 可匹配 "click" 和 "Client"）。
? 关键注意事项
- 永远校验输入与数据类型：event.number 可能为 null、undefined、数字或字符串，统一用 String(event.number) 转换后再操作；
- 性能提示：eventRender 在每次视图重绘时高频触发，避免在其中执行复杂计算或 DOM 查询（如 $('#number').val() 应缓存）；
-
优化写法（推荐）：
// 提前缓存搜索值，避免重复 DOM 查询 const $searchInput = $('#number'); $('#calendar').fullCalendar({ eventRender: function(event, element, view) { const term = $searchInput.val().trim(); return term === '' || String(event.number).toLowerCase().includes(term.toLowerCase()); } });
✅ 总结
indexOf() 并非唯一解——现代 JavaScript 提供了更语义化、更安全、更强大的字符串匹配能力。从简单的 includes()，到结构化解析的 some() + 数组匹配，再到正则驱动的模糊搜索，每种方案都可根据业务场景精准选用。关键在于：以数据形态为出发点设计匹配逻辑，而非硬套单一方法。升级后，你的 FullCalendar 搜索将真正支持“关键词联想”“部分匹配”和“用户友好交互”。
