JavaScript动态数组精准匹配：求正则表达式及解决方案

需求说明：
需要实现一个功能，接收动态数组和以上下划线分隔关键词的搜索字符串，筛选出数组中包含所有搜索关键词的元素，不能匹配无关内容。

示例数组：

let arr1 = ['ef','cd','ab','cdab','efab','cdef','ab/cd/ef','cd/ef,ab','cd/ab','ab/ef']

测试场景：

• 搜索词为ef_ab，预期输出：['efab','ab/ef']
• 搜索词为ab_cd_ef，预期输出：['ab/cd/ef','cd/ef,ab']
• 搜索词为cd，预期输出：['cd']

自己尝试的代码：

let arr1 = ['ef', 'cd', 'ab', 'cdab', 'efab', 'cdef', 'ab/cd/ef', 'cd/ef,ab', 'cd/ab', 'ab/ef']

let regex = /(?=.*word1)(?=.*word2)(?=.*word3)/;

let arr2 = [];

for (i = 0; i < arr1.length; i++) {
  if (regex.test(arr1[i]))
    arr2.push(arr1[i]);
}
console.log(arr2)

解决方案 #

1. 正则表达式方案

核心思路：根据搜索词动态生成包含所有关键词的正向预查正则，确保元素包含每一个关键词。如果关键词包含正则特殊字符（如/、.等），需要先转义避免语法错误。

function filterByKeywords(arr, searchStr) {
  // 分割搜索词为关键词数组
  const keywords = searchStr.split('_');
  // 转义正则特殊字符的工具函数
  const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  // 动态生成正则：每个关键词对应一个正向预查规则
  const regexPattern = keywords.map(key => `(?=.*${escapeRegExp(key)})`).join('');
  const regex = new RegExp(regexPattern);
  
  // 筛选符合条件的数组元素
  return arr.filter(item => regex.test(item));
}

// 测试用例
const arr1 = ['ef','cd','ab','cdab','efab','cdef','ab/cd/ef','cd/ef,ab','cd/ab','ab/ef'];
console.log(filterByKeywords(arr1, 'ef_ab')); // ['efab','ab/ef']
console.log(filterByKeywords(arr1, 'ab_cd_ef')); // ['ab/cd/ef','cd/ef,ab']
console.log(filterByKeywords(arr1, 'cd')); // ['cd']

2. 非正则方案（更直观）

用数组的filter结合every方法，直接检查每个元素是否包含所有关键词，无需处理正则转义，适合关键词无特殊字符的场景。

function filterByKeywords(arr, searchStr) {
  const keywords = searchStr.split('_');
  return arr.filter(item => {
    // 验证当前元素是否包含所有关键词
    return keywords.every(key => item.includes(key));
  });
}

// 测试用例
const arr1 = ['ef','cd','ab','cdab','efab','cdef','ab/cd/ef','cd/ef,ab','cd/ab','ab/ef'];
console.log(filterByKeywords(arr1, 'ef_ab')); // ['efab','ab/ef']
console.log(filterByKeywords(arr1, 'ab_cd_ef')); // ['ab/cd/ef','cd/ef,ab']
console.log(filterByKeywords(arr1, 'cd')); // ['cd']

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