JavaScript学习笔记(五):JS 中使用正则表达式实现数据模糊匹配

JS 中使用正则表达式实现数据模糊匹配


前言 :在实际coding中我们写搜索功能的时候,会希望能对数组数据进行模糊匹配

1、实现功能

例如当我们在名称中输入测二就可以模糊匹配出项目名称中有测二两个字的内容
在这里插入图片描述
在这里插入图片描述

2、如何实现

实现方法(直接上代码):

const tableData =  [
        {
    
     id: 1, site: "WCD", title: "疫情看板", full_title: "疫情看板系统", description: "共董事会工作日查看整体出勤情况", status: 6, allStatus: 1, user: "Carmen Luo", create_date: "2020-2-10", it_dev: "Mio Li; Lily Wu", it_maintain: "May Wang", plan_end: "2020-2-22", actual_end: "2020-2-21" },
        {
    
     id: 2, site: "WCD", title: "DCM", full_title: "Digtal Control Management", description: "Dell 要求CR提交系统", status: 6, allStatus: 1, user: "Sally Zheng", create_date: "2020-4-1", it_dev: "Mio Li; Lily Wu", it_maintain: "May Wang", plan_end: "2020-5-30", actual_end: "2020-5-22" },
        {
    
     id: 3, site: "WCD", title: "测试一", full_title: "测试一", description: "供测试使用", status: 6, allStatus: 1, user: "Hart Huang", create_date: "2020-6-1", it_dev: "Mio Li; Lily Wu", it_maintain: "May Wang", plan_end: "2020-6-10", actual_end: "2020-6-10"}
        // 此处省略若干条数据
      ]

// 查询方法
tableDataSearch (title) {
    
    
	// 实现模糊查询关键代码
	if(title){
    
    
        let str = ['',...title,''].join('.*');
        let reg = new RegExp(str);
        this.tableData = this.tableData.filter(a => reg.test(a.title) || reg.test(a.full_title));
      }
}

猜你喜欢

转载自blog.csdn.net/weixin_44104809/article/details/114401294