JavaScript(Vue框架)如何根据用户输入过滤数组，输入左括号时精确匹配

现有代码问题梳理 #

你当前的userInputedFormulas逻辑存在几处明显错误：

• 若userInput是用户输入的字符串，调用forEach方法会直接报错
• 直接将filter返回的数组作为if判断条件，只要数组非空就恒为真，判断逻辑完全失效
• 第二个判断分支中误用=做匹配，会直接修改allFormulas原数组的name字段值
• 模板代码中v-list的闭合标签误写为</v-list>，会导致渲染异常

修正后实现代码 #

直接替换原来的userInputedFormulas方法即可：

userInputedFormulas() {
  // 兜底处理空数据场景
  if (!this.allFormulas) return []
  const rawInput = this.userInput?.trim() || ''
  const inputLowerCase = rawInput.toLowerCase()

  // 输入包含左括号时触发完全匹配逻辑
  if (rawInput.includes('(')) {
    // 提取括号前的内容作为匹配关键词
    const exactMatchKey = inputLowerCase.split('(')[0]
    return this.allFormulas.filter(formula => {
      return formula.name.toLowerCase() === exactMatchKey
    })
  }

  // 无括号时走默认模糊匹配逻辑
  return this.allFormulas.filter(formula => {
    return formula.name.toLowerCase().includes(inputLowerCase)
  })
}

同时修正模板的闭合标签问题：

<div>
    <v-list v-for="item in userInputedFormulas" :key="item.id" >
        <v-list-item>
            <v-list-item-title>
                {{ item.name }} {{ item.structure }}
            </v-list-item-title>
        </v-list-item>
    </v-list>
</div>

逻辑说明 #

• 所有匹配统一转小写处理，避免大小写敏感导致匹配失败，如果需要严格区分大小写可以去掉所有.toLowerCase()调用
• 用户输入包含(时，自动截取括号前的内容做完全匹配，比如输入SUM(就只会返回name为SUM的条目
• 正常无括号输入时保持原有模糊包含匹配的逻辑不变
• 增加了空值兜底逻辑，避免数据未加载完成时控制台报错

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