这是在实现搜索功能的时候遇到的一个问题,在搜索的场景中,会根据搜索框中输入的内容,匹配出包含搜索内容的部分。简单模拟还原使用场景;
首先定义一个遍历 value
用来接收输入的内容
var value;
再定义一个简单的数组来模拟需要匹配的数据
var list = ["aBcd", "abcd","abcd"];
那么搜索的功能简化就是,在这个数组中匹配出包含搜索的内容数据,并将其返回
如果这个功能这样封装:
function filterList(value,list) {
return list.filter( item => {
return item.match(value)
})
}
当我们搜索框中输入 b
时,就只能匹配数组的后两项数据
filterList = ["abcd","abcd"];
如果我们的期望的是能够忽略字母的大小写,此时在 match
匹配时,参数需要一个正则表达式,下面将上面封装的功能进行改进一下:
function filterList(value,list) {
// 将接收的搜索内容进行处理,这里直接使用字符串拼接一个正则表达式,当然也可以使用 new RegExp
value = '/' + value + '/i'
return list.filter( item => {
// vulue 是拼接的一个表达式,需要使用 eval 函数先计算
return item.match(eval(value))
})
}
这样,再次回到上面的使用场景,无论输入b
或者B
都能匹配出数组中全部的数据了
仅为个人笔记,若有Bug或补充,可以留言,谢谢!