前端做模糊搜索-简单正则版

2019年11月3日 339次阅读

简单介绍：

模糊搜索就是不要求搜索字段是连续的，之后包含这些字就行，不连续也行。
例如：搜索bj
结果可以是beijing或者baoji
《前端做模糊搜索-简单正则版》

思路：

思路也非常简单，用正则匹配结果就行。例如，关键词bj，拿来匹配的正则应该是/(.*)(b)(.*)(j)(.*)/i，忽略大小写。
观察目标正则的规律，发现也很简单:
1. 在每次关键字之间插入：)(.*)(
2. 然后头是：(.*)(
3. 尾是：)(.*)
4. 然后new RegExp生成个正则就行

代码实现：
// 我顺便用字符串模板拼接起来了
function generReg(val) {
    return new RegExp(`(.*)(${val.split('').join(')(.*)(')})(.*)`, 'i');
}
// 简单易懂版
function generReg(val) {
    let head = '(.*)('
    let tail = ')(.*)'
    let body = val.split('').join(')(.*)(')
    return new RegExp(head + body + tail, 'i')
}

demo

基于vue写了个demo：传送门

后记

一般工作中我更喜欢用indexOf

参考

前端做模糊搜索

点赞