正则实现多词筛选

正则实现多词筛选"/>

正则实现多词筛选

Web技术研究所

文章地址：.html

很久以前我写过一篇关于正则表达式实现「与」运算的文章，当时举了个没啥用的例子。最近做即时筛选的时候真用上了这货。让筛选条件支持多词筛选绝对能够飙升用户体验，具体原理我就不赘述了，可以翻以前的文章查阅，这里只是把「即时筛选」的代码分享下。
　　由于没啥测试数据可用，我随便找了一组。下面的程序支持多词筛选，比如用户输入「第二季」可能会出来一坨数据，但空格下再输入「无头」就只会出一个结果了。 
　　从百度搜索建议的尿性来看，应该有很多人会这么输入才对，所以支持多词筛选绝对是有价值的。废话不多说，直接看代码注释运行<input id="keywords" placeholder="筛选关键词" autocomplete="off" />
<ul id="list"></ul>
<script>
// 这是一组用于测试的数据
var data=[
  "黑子的篮球第三季",
  "无头骑士异闻录第二季",
  "暗杀教室",
  "东京食尸鬼第二季",
  "Aldnoah Zero 第二季",
  "JOJO 的奇妙冒险埃及篇",
  "舰队 Collection",
  "偶像大师灰姑娘女孩",
  "路人女主的养成方法",
  "元气少女缘结神第二季"
];
// 监听键盘事件以提供筛选
keywords.onkeyup=function(){
  // 创建一个用于筛选的正则表达式
  var pattern=new RegExp(
    // 简易的分词
    this.value.split(/\s+|\b/).map(function(word){
      // 对每个词包裹一个正向预查，允许前面存在若干不匹配的字符
      return "(?=.*"+word.replace(/\W/g,function(e){
        // 转义为正则安全字符
        return "\\u"+("000"+e.charCodeAt(0).toString(16)).slice(-4);
      })+")";
    }).join(""),
    "i" // 不区分大小写
  );
  // 执行筛选并调用渲染
  render(data.filter(function(item){
    return pattern.test(item);
  }));
};
// 渲染 DOM
// 随手写的一个逗比函数，不要吐槽性能，仅测试用
function render(result){
  list.innerHTML="";
  var i=result.length;
  while(i-->0){
    var li=document.createElement("li");
    li.textContent=result[i];
    list.appendChild(li);
  };
};
// 初始渲染
onload=render.bind(null,data);
</script>