如何使用Js正则表达式实现模糊匹配（Todolist）

coocochen

于 2019-09-16 21:23:08 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_36368991/article/details/100901562

这篇博客展示了如何利用JavaScript的正则表达式进行模糊匹配，以实现Todolist的功能。通过关键代码演示，作者提供了完整的代码示例链接以及个人网站链接，供读者深入学习和实践。

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

最后效果图：

话不多说，请看关键代码：

input.addEventListener("input",(e)=>{  //input事件绑定
  if(e.target.value){
    let reg = new RegExp(e.target.value,"i");      //正则匹配
    removeall();   //将列表清空
    queryitem(reg,e.target.value);
  }
  else{
    removeall();
  }
});

var index;

function queryitem(reg,inputValue){  //模糊查询
  for(let i=0;i<li.length;i++){
    index=li[i].textContent.search(reg);   //使用search得到匹配的索引值
    let matchContent="";
    if(index>-1){
      let content = li[i].textContent.replace(/\u00D7/g,"");
      let contentlist = content.split("");      //将匹配到的列表项转换为数组
      contentlist.map((item,i)=>{      
        if(i===index){
          matchContent+="<strong>"+inputValue+"</strong>";  //将匹配的输入值突出显示
        }else if(i<index||i>=index+inputValue.length){