正则实现多词筛选

本文介绍了一种使用正则表达式实现多词筛选的方法,通过简单的分词和正向预查技术来提升用户体验。提供了具体的JavaScript实现代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文转自:

Web技术研究所

文章地址:http://www.web-tinker.com/article/20840.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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值