详解JavaScript中的正则表达式

  • A+
所属分类:Web前端
摘要

这里有个注意点就是:如果正则表达式是动态的话,只能选择第二种。
其中的flags有3个标志
g:表示全局模式,即模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止;
i:表示不区分大小写模式,即在确定匹配项时忽略模式与字符串的大小写;
m:表示多行模式,即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。
当然还有其他的flags,用到的极少,不做过多阐述。
至于以上的w什么意思,稍等,请继续往下看。


实际工作中,JavaScript正则表达式还是经常用到的。所以这部分的知识是非常重要的。

一、基础语法:

第一种:字面量语法

var expression=/pattern/flags; 

第二种:RegExp构造函数语法

var pattern = /w/gi;  //字面量语法 var pattern = new RegExp('\w', 'gi');//构造函数语法,这两者是等价的 

这里有个注意点就是:如果正则表达式是动态的话,只能选择第二种。
其中的flags有3个标志
g:表示全局模式,即模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止;
i:表示不区分大小写模式,即在确定匹配项时忽略模式与字符串的大小写;
m:表示多行模式,即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。
当然还有其他的flags,用到的极少,不做过多阐述。
至于以上的w什么意思,稍等,请继续往下看。

二、方法

主要有test(),search(),match(),replace()。当然还有其它的很多方法,不作阐述,毕竟用到的很少。
1、test()方法的使用
判断某个字符串中是否含有相应的字符串
2、search()方法的使用
搜索相应的字符串第一次出现的索引位置,如果未找到,则返回-1
3、match()方法的使用
返回匹配的数组
4、replace()方法的使用,这个用到的还是非常多的
匹配相应的字符串,然后将其替换成其他字符串

三、匹配表达式跟实战

1、断言:
所谓的断言呢,就是表示一个匹配在某些条件下发生。总之呢,概念有点绕,直接看下文。待我慢慢续来。

字符 描述
^ 匹配开头
$ 匹配结尾
b 匹配单词的边界
B 匹配非单词的边界

举个例子
我要匹配一个字符串,开头到结尾是dog,忽略大小写

var pattern = /^dog$/i;//忽略大小写  console.log(pattern.test('dog'));//true console.log(pattern.test('sdfdog'));//false console.log(pattern.test('dog56'));//false console.log(pattern.test('dOG'));//true 
var pattern = /bw+/g;//全局匹配,这里的+,是量词,代表1次或者多次  console.log('Hello World'.match(pattern));//输出['Hello','World'],这里就是match用法,返回匹配的数组。 

在这里,说下,b是匹配单词的边界,那么B是匹配非单词的边界。一个小写,一个大写,大写是反义。那么不必我多说了吧。
再说下单词边界,可能很多人都不太清楚单词边界
详解JavaScript中的正则表达式
我稍微解释下啊详解JavaScript中的正则表达式,比如说,Hello World单词边界有四个,分别是H位置,o位置,W位置,d位置
2、字符类:

元字符 描述
. 查找单个字符,除了换行和行结束符
w 查找单词字符,相当于[A-Za-z0-9_]
W 查找非单词字符,相当于[^A-Za-z0-9_]
下面的反义便不再罗列出来了。
d 查找数字,相当于[0-9]
s 查找空白字符
查找NULL字符
n 查找换行符
f 查找换页符
r 查找回车符
t 查找制表符
v 查找垂直制表符

3、范围:

字符 描述
[abc] 匹配a,b,c中的任意一个字符
[^abc] 匹配不是a,b,c中的任意一个字符
[0-9] 匹配0-9任意范围的数字,同理[a-z]匹配a-z任意范围的字符
[a-z] 匹配a到z之间的任意一个字符
x|y 匹配x或者y

4、量词:

字符 描述
n+ 匹配任何包含至少一个字符n的字符串
n* 匹配任何包含零个或多个n的字符串
n? 匹配任何包含零个或者一个n的字符串
n{x} 匹配包含x个n的字符串
n{x,y} 匹配最少x个,最多y个n的字符串

四、拓展

匹配10-36之间的数字

var pattern = /1[2-9]|[2-3][0-9]|4[0-6]/;//12-46  console.log(pattern.test(11));//false console.log(pattern.test(12));//true console.log(pattern.test(20));//true console.log(pattern.test(36));//true console.log(pattern.test(46));//true console.log(pattern.test(47));//false 

将'Hello,World!Hello'中的Hello替换成Welcome

这里主要是强调一下replace方法在正则中的使用,因为这个在实际中用到的还是非常多的。后面的flags中的g,加上跟不加上有着很大的区别的。

var pattern = /Hello/g;  var oldString = 'Hello,World!Hello'; var newString = oldString.replace(pattern, 'Welcome'); console.log(newString);//Welcome,World!Welcome 

详解JavaScript中的正则表达式