React列表过滤正则仅匹配完整单词，需实现部分动态匹配

你的问题出在正则里的\b单词边界上——它要求匹配内容必须是完整单词，所以输入部分字符（比如"ord"）或者空格时自然找不到匹配项。要实现部分动态匹配，只需调整正则规则，同时处理输入内容里的特殊字符避免正则报错。

第一步：添加正则转义函数 #

用户输入的内容可能包含*、+、.这类正则特殊字符，直接放进正则会导致语法错误，先写一个转义函数：

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

第二步：修改过滤逻辑 #

去掉原正则的单词边界限制，改成匹配任意位置的子串，同时用上转义函数处理输入内容：

typeHandler(data) {
  // 转义输入中的正则特殊字符
  const escapedCommand = escapeRegExp(data.command);
  // 匹配任意位置的子串，保持大小写不敏感
  const regex = new RegExp(escapedCommand, "gi");

  const result = initialCommands.filter(item => {
    return item.label.match(regex);
  });

  this.setState({
    prunedCommands: result,
    prunedCommandsReady: true
  });    
}

效果验证 #

• 输入ord → 匹配到Order more plasters
• 输入meet → 匹配到Book a meeting with my doctor
• 输入do → 匹配到Book a meeting with my doctor
• 输入空格 → 匹配所有包含空格的列表项（即全部内容）

这样就能实现实时的部分字符匹配，不管用户输入开头、中间还是结尾的片段，都能正确过滤出结果。

内容的提问来源于stack exchange，提问作者The Old County