时间戳

首页 > 解决方案 > 按文本输入过滤，如何添加正则表达式？-香草JS

javascript - 按文本输入过滤，如何添加正则表达式？-香草JS

问题描述

我正在使用带有香草 Javascript 的 Mixitup.js。这是一个有效的 JSFiddle。

当您输入“blue”、“green”或“pink”时，它只显示具有该类名的元素。

我想要的是使用正则表达式过滤结果，例如使用：new RegExp('^|\\s','gi'). 但是，我不知道如何正确编写它，也不知道如何将其实现到代码中。

现在，当您输入“reen”时，它仍会显示“green”的结果。我不想要这个。我只想要从单词开头匹配的结果（因此^|）。

我保留了开发演示脚本中的注释，希望对您有所帮助。完整的演示在这里

谢谢你的帮助！

标签： javascriptinputcss-selectorsmixitup

解决方案

据我了解，您正在使用基于属性的选择器来选择类以特定文本开头的元素。但是在您的示例中，元素有两个类“混合”和颜色名称

类="混合绿色"

简单地使用[class^=color class name ] 是行不通的。

尝试更换

Mixer.filter('[class*="' + searchValue + '"]');

和

Mixer.filter('[class^="mix ' + searchValue + '"]');

推荐阅读