如何在React搜索栏中实现支持分散字符匹配的Regex筛选功能？

嘿，这问题我熟！要实现这种分散字符匹配的搜索功能，核心就是构造一个能按顺序匹配字符（中间允许任意字符）的正则表达式，我给你一步步拆解解决方案：

核心思路 #

把用户输入的每个字符之间插入.*（表示匹配任意数量的任意字符），同时开启不区分大小写的模式。比如输入stk，会被转换成正则/s.*t.*k/i，这样就能匹配Stark（S→t之间的t、a、r都被.*覆盖），完美满足你的需求。

实现过滤函数 #

先写一个通用的过滤函数，处理正则构造和数组过滤：

// 转义正则特殊字符（防止用户输入.、*等字符干扰正则逻辑）
const escapeRegExp = (string) => {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
};

const filterItems = (items, searchTerm) => {
  // 搜索词为空时返回所有数据
  if (!searchTerm.trim()) return items;
  
  // 拆分搜索词并转义每个字符
  const escapedChars = searchTerm.split('').map(char => escapeRegExp(char));
  // 构造正则模式：每个字符后加.*，确保按顺序匹配
  const regexPattern = escapedChars.map(char => `${char}.*`).join('');
  // 创建不区分大小写的正则实例
  const regex = new RegExp(regexPattern, 'i');
  
  // 过滤数组，匹配title字段
  return items.filter(item => regex.test(item.title));
};

结合React组件使用 #

把这个过滤函数集成到你的React组件里，比如一个带搜索栏的列表：

import { useState } from 'react';

// 上面的escapeRegExp和filterItems函数放在这里

const HouseList = () => {
  const [searchTerm, setSearchTerm] = useState('');
  // 你的数据源
  const houseData = [
    { id: 1, title: "Stark", date: "17-08-2017" },
    { id: 2, title: "Lannister", date: "17-08-2017" },
    { id: 3, title: "Targaryen", date: "16-08-2017" },
    { id: 4, title: "Bolton", date: "17-08-2017" },
    { id: 5, title: "Karstark", date: "17-08-2017" }
  ];
  
  // 获取过滤后的列表
  const filteredHouses = filterItems(houseData, searchTerm);

  return (
    <div className="search-container">
      <input
        type="text"
        placeholder="输入分散字符搜索..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <ul className="house-list">
        {filteredHouses.map(house => (
          <li key={house.id}>
            <span>{house.title}</span>
            <span className="date">{house.date}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default HouseList;

测试验证 #

• 输入stk：会匹配Stark和Karstark（如果只想匹配Stark，可以把正则模式改成^${regexPattern}，强制从开头匹配）
• 输入ark：匹配Stark、Karstark
• 输入ol：匹配Bolton

完全符合你描述的需求，而且还处理了正则特殊字符的转义，避免潜在的bug~

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