十分钟掌握Javascript正则表达式
前端界有这么一句话:会正则的不一定是大牛,但是不会正则的一定不是大牛。所以正则对于前端工作者还是相当重要的一门课程。
在阅读之前,先来看一看正则到底是什么东西。正则,简单点说,它就是用来处理某一传字符串,相当与起到一个过滤的作用,在字符串中找到符合自己要求的字符集。
1.怎样去创建一个正则表达式:
两种方法去创建一个正则表达式。第一种方式是通过两个//进行创建。
例如 var Reg = /'hello'/(修饰符)
上面的正则表达式代表在某个字符串中匹配'hello',修饰符会在后面做详细介绍。
第二种方法是通过构造函数的方式进行创建。
例如:var Reg = new RegExp('hello','修饰符');
这个方法和第一个方法匹配的效果是一致的。
两种方法不同的地方是第一种方法的匹配条件是写在//中间,修饰符是跟在//后面去写
第二种方法的条件以及修饰符都是传在()内,第一个值代表条件,后面的代表修饰符。
2.修饰符
g:global 全局搜索,不添加搜索到第一个停止
表示在一个字符串存在多个相同的字符集,如果不写全局搜索,即会在找到一个以后
返回,而写了全局搜索则会把所有符合条件的字符集都找出来,然后再返回。
i:ignore case 忽略大小写,默认为区分大小写
区分大小写的功能
m:multiple lines 多行搜索。
如果某个字符串中存在多个相同的字符集,且这些字符集没有在同一行,就可以使用
多行搜索进行匹配。有一点需要注意的是,多行搜索需要全局搜索的配合。即//gm
这是常用的三个修饰符g、i、m
3.正则对象以及字符串方法:
正则对象(exec):
该方法表示在字符串中寻找符合正则条件的字符集,如果没有找到,则会返回null
找到了则会返回一个数组,数组下标为0的元素及代表匹配到的字符集,index即代表 字符集的起始下标,input代表的是原字符串。
使用方法:拿上面声明的正则做例子,即Reg.exec(字符串)
正则方法(test):
该方法放回一个Boolean值。即字符串中有符合正则条件的字符集,即返回true
如果没有,即返回false。
使用方法:拿上面声明的正则做例子,即Reg.test(字符串);
字符串方法(replace)
该方法表示替换字符串中的某个字符集。接受两个参数,第一个参数为匹配的元素
第二个为替换的元素。第一个参数的中可以传正则表达式。
使用方法:字符串.replace('匹配的值','替换的值');
字符串方法(search)
该方法表示如果匹配到了某个字符集,则返回该字符集的下标
使用方法:字符串.search('匹配的值');
字符串方法(match)
该方法表示在字符串中寻找符合正则条件的字符集,如果没有找到,则会返回null
如果找到了则会返回一个数组,下标为0的元素即匹配到的字符集
index即此字符集的起始下标 input原字符串
如果匹配到了多个字符集则返回匹配到的字符集组成的数组。
3.元字符
一种是原意文本字符
一种是元字符。
\t:水平制表符
\v:垂直制表符
\n:换行符
\r:回车符
\0:空字符
\f:换页符
\cX:与X对应的控制字符(Ctrl+X)
范围类
()使用可以进行分组
[]表示一个类
^创建反向类
[a-z]表示字母a到字母z也可以这样写[a-zA-Z]
-线在开头和结尾之间的代表范围。在外面代表元素
预定义类:
.(点)= [^\r\n] 除了回车和换行外的所有字符
\d = [0-9] 数字字符
\D = [^0-9]非数字字符
\s = [\t\n\x0B\f\r]空白符
\S = [^\t\n\x0B\f\r]非空白符
\w = [a-zA-Z_0-9]单词字符(字母、数字、下划线)
\W = [^a-zA-Z_0-9]非单词字符
边界字符:
例如var str = '@ab@cd@ef@'
^:以xxx开始 /^@/g
$:以xxx结束/@$/g
\b:单词边界
\B:非单词边界
量词:
?:出现零次或一次(最多出现一次)
+:出现一次或多次(至少出现一次)
*:出现零次或多次(任意次)
{n}:出现n次
{n,m}:出现n到m次
{n,}:至少出现n次
贪婪模式:
正则表达式在处理中会尽可能多的匹配符合条件的字符集
非贪婪模式:
尽可能少的匹配,转换的方法:在量词后面加?出现零次或一次(最多出现一次)
4.反向引用的例子:
把2015-12-25变为25-12-2015
使用$符,$符在这里匹配的是分组的内容
正则/(\d{4})-(\d{2})-(\d{2})/
即$1代表的就是第一个()的内容,$2代表的就是第二个()的内容,$3代表的就是第
三个()的内容。
即var str = '2015-12-25';
var Reg = /(\d{4})-(\d{2})-(\d{2})/
console.log(str.replace(Reg,'$3-$2-$1'));
学会正则以后,你会发现处理字符串变得非常的简单。
上面只是我个人对于正则的一些理解,如果有那些地方出现书写错误,或者还有哪些是我没有提到的,欢迎补充以及提意见。