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

最后效果图:

话不多说,请看关键代码:

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+="
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是使用HBuilderX实现TodoList的步骤: 1. 创建一个HTML文件,然后在头部引入Bootstrap和jQuery库文件。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Todo List</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <h1>Todo List</h1> <form> <div class="form-group"> <input type="text" class="form-control" id="todoInput" placeholder="Enter new task"> </div> <button type="submit" class="btn btn-success">Add</button> </form> <hr> <ul id="todoList" class="list-unstyled"> </ul> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> ``` 2. 在body标签中添加一个表单和一个空的ul列表。 3. 使用jQuery编写添加任务的代码。 ```javascript $(function () { // 添加任务 $('form').submit(function (event) { event.preventDefault(); // 阻止表单默认提交行为 var todoText = $('#todoInput').val(); $('#todoList').append('<li>' + todoText + '</li>'); $('#todoInput').val(''); // 清空输入框 }); }); ``` 4. 编写删除任务的代码。 ```javascript $(function () { // 添加任务 $('form').submit(function (event) { event.preventDefault(); // 阻止表单默认提交行为 var todoText = $('#todoInput').val(); $('#todoList').append('<li>' + todoText + '<span class="remove"> X</span></li>'); $('#todoInput').val(''); // 清空输入框 }); // 删除任务 $('ul').on('click', 'span', function (event) { $(this).parent().fadeOut(300, function () { $(this).remove(); }); event.stopPropagation(); // 阻止事件冒泡 }); }); ``` 5. 最后,我们需要添加CSS样式来美化TodoList。 ```css body { margin-top: 20px; } h1 { margin-bottom: 20px; } form { margin-bottom: 20px; } span { color: #fff; background-color: #d9534f; padding: 5px; margin-left: 10px; cursor: pointer; } span:hover { background-color: #c9302c; } ``` 完成上述步骤后,就可以在HBuilderX中运行TodoList了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值