本文介绍如何在纯 JavaScript 实现的页面内实时搜索中，同时支持普通字符串匹配和用户自定义正则表达式（如通过前缀 %: 触发），并修正常见正则构造与循环逻辑错误。
本文介绍如何在纯 javascript 实现的页面内实时搜索中，同时支持普通字符串匹配和用户自定义正则表达式（如通过前缀 `%:` 触发），并修正常见正则构造与循环逻辑错误。
在构建轻量级单页应用时，常需为列表卡片（如 .cards 元素）添加实时搜索功能。原生方案（如 CSS-Tricks 提供的教程）仅支持子串模糊匹配，但实际场景中常需更灵活的筛选能力——例如区分大小写、匹配单词边界、或使用量词与分组。为此，我们可扩展 liveSearch() 函数，使其智能识别输入类型：普通文本直接进行包含匹配；若以 %: 开头，则将其余部分解析为正则表达式（支持标志如 i、g 等）。
✅ 正确实现要点
- 正则对象必须在循环内动态创建（或至少在每次搜索时重建），否则 search_query 变量值不会被更新；
- 不能用字面量 /search_query/ 直接拼接——这会匹配字面字符串 "search_query"，而非变量内容；
- 应使用 RegExp 构造函数，并合理转义用户输入（防止正则语法错误）；
- 支持双模式切换：例如约定 %:value/i 表示不区分大小写的正则匹配。
? 完整可运行代码示例
function liveSearch() {
const cards = document.querySelectorAll('.cards');
const input = document.getElementById('searchbox');
const query = input.value.trim();
// 若为空，显示全部卡片
if (!query) {
cards.forEach(card => card.classList.remove('is-hidden'));
return;
}
let regex;
let isRegexMode = false;
// 检测是否启用正则模式：以 "%:" 开头
if (query.startsWith('%:')) {
isRegexMode = true;
const regexPart = query.slice(2); // 去掉 "%:"
const flagsMatch = regexPart.match(/\/([igmuy]*)$/);
const pattern = flagsMatch
? regexPart.slice(0, -flagsMatch[0].length)
: regexPart;
try {
// 自动添加全局标志 g（更符合搜索直觉）
const flags = flagsMatch ? flagsMatch[1] + 'g' : 'g';
regex = new RegExp(pattern, flags);
} catch (e) {
console.warn('Invalid regex:', e.message);
// 正则无效时退化为字符串匹配
isRegexMode = false;
}
}
// 遍历每张卡片
cards.forEach(card => {
const text = card.innerText || card.textContent;
let matches = false;
if (isRegexMode && regex) {
matches = regex.test(text);
} else {
// 字符串包含匹配（忽略大小写）
matches = text.toLowerCase().includes(query.toLowerCase());
}
if (matches) {
card.classList.remove('is-hidden');
} else {
card.classList.add('is-hidden');
}
});
}
// 绑定事件（推荐使用防抖提升性能）
const searchInput = document.getElementById('searchbox');
let timeoutId;
searchInput.addEventListener('input', () => {
clearTimeout(timeoutId);
timeoutId = setTimeout(liveSearch, 150);
});⚠️ 注意事项与最佳实践
- 安全第一：用户输入的正则可能含非法语法（如未闭合括号），务必用 try...catch 包裹 new RegExp()，避免脚本中断；
- 转义建议：若需支持更安全的用户正则（如允许任意字符参与匹配），应在构造前对特殊字符做转义处理（但本例中保留原始语义，由用户自行负责）；
- 性能优化：高频 input 事件应配合防抖（debounce），避免每敲一个键都触发全量 DOM 遍历；
- 用户体验提示：可在输入框旁添加小图标或 placeholder（如 "输入关键词，或 %:pattern/flags 启用正则"）引导用户；
- 兼容性：RegExp 构造函数与 for...of 在现代浏览器中均广泛支持（IE11+）。
通过以上改造，你的搜索功能即可无缝支持两种模式：日常快速查找用字符串（如 "react"），高级筛选用正则（如 %:^\s*<div.*?\/> 或 %:error/i），真正兼顾简洁性与专业性。
