前端模糊匹配方式，前端正则模糊匹配

最新推荐文章于 2025-05-16 09:47:44 发布

AS_TS

最新推荐文章于 2025-05-16 09:47:44 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： js基础理论 react 项目问题

本文链接：https://blog.youkuaiyun.com/AS_TS/article/details/108056652

js基础理论同时被 2 个专栏收录

26 篇文章

订阅专栏

react 项目问题

16 篇文章

订阅专栏

本文介绍前端开发中实现模糊搜索的方法，包括使用正则表达式的匹配和字符串的indexOf方法，通过实例展示了如何在输入框中实时进行模糊匹配。

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

前端的匹配方式有很多这里简单提供模糊匹配方式：使用 RegExp 函数正则表达式来进行匹配

正则表达式

var list = ['nai','43q','5xn']
var keyWord = 'n'
var arr = []
var reg = new RegExp(keyWord)

for(var i = 0; i < list.length; i++) {
	if(list[i].match(reg)) {
		 arr.push(list[i]);
	}
}
return arr;

或

var list = ['nai','43q','5xn']
var keyWord = 'n'
var arr = []
var reg = new RegExp(keyWord)

list.forEach((item,index) => {
	if(list[index].match(reg)) {
		 arr.push(list[index]);
	}
})
console.log(arr);

forEach、for in 、 for of三者的区别： https://blog.youkuaiyun.com/one_girl/article/details/80192899

将此模糊匹配放入输入框监听事件中，就可以做到动态的模糊匹配了

  // 输入框操作
  public changeInput = (e: any) => {
    const value = e.target.value
    this.setState(() => ({ userName: value }))
    // this.getPerson({ name: value })

    // 模糊匹配人名
    let certsList: any[] = []
    let reg = new RegExp(value)
    this.state.certsListAll.forEach((item,index)=>{
      if (this.state.certsListAll[index].userName.match(reg)) {
        certsList.push(this.state.certsListAll[index])
      }
    })
    this.setState(() => ({ certsList: certsList }))
  }

网上还发现了另一种方法

字符串方法indexOf

var arr = [];
for(var i=0;i<list.length;i++){
    //如果字符串中不包含目标字符会返回-1
    if(list[i].indexOf(keyWord)>=0){
        arr.push(list[i]);
    }
}
return arr;