JavaScript实时过滤器适配字符串与正则搜索的问题求助

原代码问题分析 #

你的代码存在几个关键问题导致无法正常运行：

• 正则表达式创建错误：/search_query/是硬编码匹配字符串"search_query"，而非使用输入框的实际值，动态正则需用new RegExp()构造函数。
• 变量作用域错误：reg_query定义在循环外，此时cards[i]的i未初始化，会直接抛出引用错误。
• 缺少普通搜索与正则搜索的区分逻辑。

双模式搜索实现代码 #

以下代码同时支持普通字符串模糊搜索和前缀%:标识的正则搜索，并修复了原代码问题：

function liveSearch() {
  const cards = document.querySelectorAll('.cards');
  const searchInput = document.getElementById("searchbox");
  let searchQuery = searchInput.value.trim();
  let isRegexMode = false;
  let regex;

  // 判断是否开启正则模式
  if (searchQuery.startsWith('%:')) {
    isRegexMode = true;
    // 移除前缀，提取正则表达式内容
    const regexStr = searchQuery.slice(2);
    try {
      // 创建正则对象，开启全局+不区分大小写（可按需调整参数）
      regex = new RegExp(regexStr, 'gi');
    } catch (e) {
      // 正则语法错误时，自动降级为普通搜索
      isRegexMode = false;
    }
  }

  // 遍历卡片执行匹配逻辑
  cards.forEach(card => {
    const cardText = card.innerText;
    let isMatch = false;

    if (isRegexMode) {
      // 正则匹配模式
      isMatch = regex.test(cardText);
    } else {
      // 普通字符串模糊匹配（不区分大小写）
      isMatch = cardText.toLowerCase().includes(searchQuery.toLowerCase());
    }

    // 根据匹配结果切换卡片显示状态
    card.classList.toggle("is-hidden", !isMatch);
  });
}

使用说明 #

• 普通搜索：直接输入关键词，会在卡片文本中进行不区分大小写的模糊匹配。
• 正则搜索：输入以%:开头的内容，比如%:^[A-Z].*，会匹配以大写字母开头的卡片文本；若正则语法错误，自动降级为普通搜索。
• 绑定实时触发事件（建议添加）：

  document.getElementById("searchbox").addEventListener('input', liveSearch);
  

内容的提问来源于stack exchange，提问作者dchip