表格多值列筛选优化：如何匹配目标值且避免部分字符匹配？

要解决多位置值的匹配问题，同时避免匹配单词内部字符，你需要修改正则表达式，以位置的分隔符（/）和字符串首尾作为边界，同时转义用户输入的特殊正则字符防止出错。以下是优化后的代码：

const myFunction = () => {
  const trs = document.querySelectorAll('#myTable tr:not(.header)')
  const filter = document.querySelector('#myInput').value.trim()
  
  // 转义正则特殊字符，避免输入+、.等符号导致正则语法错误
  const escapedFilter = filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
  
  // 正则规则：匹配完整的位置片段——要么在开头，要么前面是" / "；要么在结尾，要么后面是" / "
  const regex = filter 
    ? new RegExp(`(^| / )${escapedFilter}( / |$)`, 'i')
    : null // 筛选框为空时不启用正则
  
  // 可选：如果你只需要筛选Position列，可修改这里为指定列，比如假设Position是第2列（索引1）
  // const isFoundInTds = (td, index) => index === 1 && regex.test(td.textContent)
  // 若仍需筛选所有列，则保留原逻辑，但对多位置列做正确匹配
  const isFoundInTds = td => regex ? regex.test(td.textContent) : true
  
  const isFound = childrenArr => childrenArr.some(isFoundInTds)
  const setTrStyleDisplay = ({ style, children }) => {
    style.display = filter ? (isFound([...children]) ? '' : 'none') : ''
  }
  
  trs.forEach(setTrStyleDisplay)
}

关键优化点说明： #

• 转义正则特殊字符：使用replace(/[.*+?^${}()|[\]\\]/g, '\\$&')转义用户输入的特殊字符，比如用户输入DC+时不会破坏正则语法。
• 精准匹配位置片段：正则(^| / )${escapedFilter}( / |$)确保匹配的是完整的位置值：
  • (^| / )：匹配字符串开头，或者位置前的分隔符/
  • ( / |$)：匹配位置后的分隔符/，或者字符串结尾
• 处理空筛选值：当筛选框为空时，直接显示所有行，无需正则匹配。
• 可选的列定向筛选：如果只需要针对Position列筛选，可注释掉通用的isFoundInTds，改用指定列的逻辑，提升筛选效率。

示例验证： #

• 输入DC：会匹配DC、DC / DR、DR / DC / DL这些行
• 输入AMR：会匹配AMR / AML / AMC、AMR这些行
• 输入D：不会匹配任何包含完整位置值的行（因为没有单独的D位置），避免误匹配DC中的D

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