如何根据 Javascript 中的用户输入过滤数组？

Posted 2023-02-22

技术标签:

【中文标题】如何根据 Javascript 中的用户输入过滤数组？【英文标题】：How to filter through an array depending on user input in Javascript? 【发布时间】：2021-09-21 05:24:51 【问题描述】：

我有一个使用 javascript 和 VueJS 框架的应用程序。我正在尝试创建一个根据用户类型过滤的项目的“下拉列表”。

下面是列表如何在页面上呈现的代码：

<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>

下面是 userInputedFormulas 的生成方法：

userInputedFormulas() 
    this.userInput.forEach(element => 
        if(this.allFormulas?.filter(formula => formula.name.includes(element.toLowerCase()))) 
            filteredList = this.allFormulas?.filter( 
                formula => formula.name.includes(this.userInput)
            );
         if(this.userInput == this.allFormulas?.filter(formula => formula.name)) 
            filteredList = this.allFormulas?.filter(formula => formula.name = this.userInput)
        
    );
    return filteredList;

请注意，allFormulas 基本上返回所有公式的对象数组，例如[name：'SUM'，结构：'blah'，name：'ADD'，结构：'blah'，name：'MINUS'，结构：'blah']

从某种意义上说，它在用户输入时过滤“公式”列表，就像这样：

但是，当用户输入字符 ( - 圆括号 - 我想过滤它以便它只显示确切的公式。

例如，用户键入“SUM(”，而不是上面的图片显示名称中包含“SUM”的所有项目，它应该只显示“SUM”项目。我如何能够过滤这是因为我不确定如何走得更远？

【问题讨论】：

【参考方案1】：

您不能将搜索查询与正则表达式匹配吗？如果存在圆括号，则将功能从数组过滤切换为仅查找正确的功能？

【讨论】：

【参考方案2】：

我可以看到两个选项：

选项 A：我假设您的正则表达式看起来像这样（简化）：^(TERM)/gm。如果用户输入(，您可以将正则表达式更改为^(TERM)$/gm，用美元符号替换括号，以强制正则表达式评估整个术语，而不仅仅是部分。

选项 B：更简洁的方法是为每个结果项定义一个正则表达式，并使用这个特定的正则表达式来评估搜索词，例如SUM 函数是这样的：^SUM($([\d,\s]+$)?)?/gm（免责声明：我不是正则表达式专家）