Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

正则实现多词筛选

  很久以前我写过一篇关于正则表达式实现「与」运算的文章,当时举了个没啥用的例子。最近做即时筛选的时候真用上了这货。让筛选条件支持多词筛选绝对能够飙升用户体验,具体原理我就不赘述了,可以翻以前的文章查阅,这里只是把「即时筛选」的代码分享下。
  由于没啥测试数据可用,我随便找了一组。下面的程序支持多词筛选,比如用户输入「第二季」可能会出来一坨数据,但空格下再输入「无头」就只会出一个结果了。
  从百度搜索建议的尿性来看,应该有很多人会这么输入才对,所以支持多词筛选绝对是有价值的。废话不多说,直接看代码注释 <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>
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^