如何在match中使用正则表达式
这是在实现搜索功能的时候遇到的一个问题,在搜索的场景中,会根据搜索框中输入的内容,匹配出包含搜索内容的部分。简单模拟还原使用场景;
首先定义一个遍历 value
用来接收输入的内容
var value;
再定义一个简单的数组来模拟需要匹配的数据
var list = ["aBcd", "abcd","abcd"];
那么搜索的功能简化就是,在这个数组中匹配出包含搜索的内容数据,并将其返回
如果这个功能这样封装:
function filterList(value,list) {
return list.filter( item => {
return item.match(value)
})
}
当我们搜索框中输入 b
时,就只能匹配数组的后两项数据
filterList = ["abcd","abcd"];
如果我们的期望的是能够忽略字母的大小写,此时在 match
匹配时,参数需要一个正则表达式,下面将上面封装的功能进行改进一下:
function filterList(value,list) {
// 将接收的搜索内容进行处理,这里直接使用字符串拼接一个正则表达式,当然也可以使用 new RegExp
value = '/' + value + '/i'
return list.filter( item => {
// vulue 是拼接的一个表达式,需要使用 eval 函数先计算
return item.match(eval(value))
})
}
这样,再次回到上面的使用场景,无论输入b
或者B
都能匹配出数组中全部的数据了
仅为个人笔记,若有Bug或补充,可以留言,谢谢!
如何在match中使用正则表达式的更多相关文章
- 如何在JS中应用正则表达式
背景:在之前的随笔中写过C#中如何使用正则表达式,这篇随笔主要讲如何在js中应用正则表达式 如下代码: $("#zhengze").click(function () { var ...
- 如何在MySQL中获得更好的全文搜索结果
如何在MySQL中获得更好的全文搜索结果 很多互联网应用程序都提供了全文搜索功能,用户可以使用一个词或者词语片断作为查询项目来定位匹配的记录.在后台,这些程序使用在一个SELECT 查询中的LIKE语 ...
- 精通 JavaScript中的正则表达式
精通 JS正则表达式 (精通?标题党 ) 正则表达式可以: •测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证 ...
- JavaScript中的正则表达式(终结篇)
JavaScript中的正则表达式(终结篇) 在之前的几篇文章中,我们了解了正则表达式的基本语法,但那些语法不是针对于某一个特定语言的.这篇博文我们将通过下面几个部分来了解正则表达式在JavaScri ...
- Python::re 模块 -- 在Python中使用正则表达式
前言 这篇文章,并不是对正则表达式的介绍,而是对Python中如何结合re模块使用正则表达式的介绍.文章的侧重点是如何使用re模块在Python语言中使用正则表达式,对于Python表达式的语法和详细 ...
- 工作随笔——UIButton的EdgeInsets + Swift中的正则表达式;
1.UIButton的EdgeInsets UIButton的EdgeInsets方法,是用来设置title和image对于上左下右四个方向的偏移,但是很奇怪的是,刚开始只有Image,titile也 ...
- Javascript中的正则表达式
Javascript中的正则表达式 刚开始接触正则表达式的时候,觉得这是个很死板的东西(没办法,计算机不能像人眼一样能很快的辨认出我们需要的结果,它需要一定的规则来对它进行限制),了解的越多,发现这个 ...
- 在Visual Studio中使用正则表达式匹配换行和批量替换
系统环境:Windows 8.1 Enterprise Update 2 x64 开发环境:Mircosoft Visual Studio Ultimate 2013 Update 2 RC 问题:如 ...
- 转载 javascript中的正则表达式总结 一
定义正则表达式的方法 定义正则表达式的方法有两种:构造函数定义和正则表达式直接量定义.例如: var reg1 = new RegExp('\d{5, 11}'); // 通过构造函数定义 var r ...
随机推荐
- jstl标注标签库
1. 常用标签 引入标签库: <%@ taglib prefix=”c” uri=”” %> 1. C 标签 (1)<c:out value=”” default=” ...
- 二、MVC3+EF单表增删改查
document 表为例 写入静态类 NorthwindDataProvider: Controller可直接调用:如 //获取document表全部数据 NorthwindDataProvider. ...
- Java 枚举 获取前后元素,下一个元素
https://blog.csdn.net/jiangshanwe/article/details/79119219
- HTML标签 链接 随笔3
4-1 <a>标签 网页链接 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签. 语法: <a href="目标网 ...
- Grunt压缩图片和JS
今天我们来说一下用Grunt来压缩图片和JS吧! 首先要安装插件: 这是压缩图片的; npm install --save-dev gulp-imagemin 这是压缩JS的: npm install ...
- css background 背景知识详解
background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
- mysql的sql_mode介绍和修改
原文链接: http://blog.csdn.net/wulantian/article/details/8905573 mysql目录下有一个配置文件my.conf. mysql数据库有一个环境 ...
- xcode选择开发者时"The Apple Developer Program License Agreement has been updated"
解决方法:进入开发者中心查看红色提示信息,同意就行
- 【Spring实战】—— 13 AspectJ注解切面
前面了解了典型的AOP基于配置的使用方法,下面介绍下如何依赖于注解来实现AOP. 基于注解降低了配置文件的复杂程度,但是引入了程序间的耦合,其中的优劣待用户自己判断了. 需要注意的是,确定Aspect ...
- 编程思想的理解(POP,OOP,SOA,AOP) x
http://blog.chinaunix.net/uid-29417436-id-4060980.html 1)POP--面向过程编程(Process-oriented programming ): ...