JavaScript 中实现支持字符串与正则表达式的实时搜索过滤-js教程-PHP中文网

JavaScript 中实现支持字符串与正则表达式的实时搜索过滤

本文介绍如何在纯 JavaScript 实现的页面内实时搜索中，同时支持普通字符串匹配和用户自定义正则表达式（如通过前缀 %: 触发），并修正常见正则构造与循环逻辑错误。

本文介绍如何在纯 javascript 实现的页面内实时搜索中，同时支持普通字符串匹配和用户自定义正则表达式（如通过前缀 `%:` 触发），并修正常见正则构造与循环逻辑错误。

在构建轻量级单页应用时，常需为列表卡片（如 .cards 元素）添加实时搜索功能。原生方案（如 CSS-Tricks 提供的教程）仅支持子串模糊匹配，但实际场景中常需更灵活的筛选能力——例如区分大小写、匹配单词边界、或使用量词与分组。为此，我们可扩展 liveSearch() 函数，使其智能识别输入类型：普通文本直接进行包含匹配；若以 %: 开头，则将其余部分解析为正则表达式（支持标志如 i、g 等）。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

✅ 正确实现要点

正则对象必须在循环内动态创建（或至少在每次搜索时重建），否则 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);
});