在日常工作中难免会用到indexOf(),replace(),slice()等函数来处理一些字符串或者数组的数据拼装问题;其实大部分情况下简单的正则表达式足以解决绝大部分的问题。
注:此篇文章供学习javascript的正则表达式,若要查正则表达式大全则可以绕道;
下面就来大概介绍一下js的正则表达式:
1.常见的正则表达式使用的方法
1.test() 此方法用于检测一个字符串是否匹配正则表达式,返回值为 Boolean类型;匹配为true,不匹配则为false;
2.match() 此方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配;通常需要配合正则表达式中的括号(),用于捕获所需要的值(捕获的消耗比检测要大,合理的使用括号捕获所需的值);
3.replace() 此方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串,其中也会用到捕获;
4.exec() 此方法用于检索字符串中的正则表达式的匹配,并不常用,返回值中含匹配的值并包含其index和原始的字符串;
2.常用的正则表达式
1.首先我使用 "//" 来匹配一段数字号码;
/123/.test('123'); true
/123/.test('12'); false
/123/.test('a123b'); true
此时我们发现//中加所需要匹配的字符串,类似于indexOf(),仅检测是否包含;这对于我们来说是远远不够用的;
2.下面开始介绍锚点,锚点用来表示起始位置与结束位置;
^ 匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配"An a"
$ 匹配一个输入或一行的结尾,/a$/匹配"An a",而不匹配"an A"
接下来我们用锚点来匹配一串电话号码:
/^18136225555$/.test('18136225555'); true
/^a18136225555$/.test('18136225555'); false
/^18136225555b$/.test('18136225555'); false
由此可见,我们就可以精确的匹配一个字符串了;
通常情况下,我们所需要匹配的字符串并没有那么精确,通常是一种有规律的匹配;
3.字符类的使用
javascript中的字符类用于匹配一类字符中的一个;
eg:
[123] : 1或2或3
[0-9] : 一个数字 (^用在字符类中表示非eg:[^0-9]:非数字的一个)
[a-z] : 一个字母
. : 任一个字符(除了换行)
此时我用用来匹配一串电话号码
/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test('18136225555') true
/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test('1813622555a') false
这样我们就可以简单的匹配一个电话号码了;
但是这样的写法,有悖于我们写代码的目的,避免重复,此时我们就可以用到具有特殊意义的字符
4.元字符
比如我们刚刚介绍的^,$
\d : [0-9] 匹配一个数字; \D : [^\d] 匹配一个非数字
\s : 匹配一个空白符 \S : [^\s] 匹配一个非空白符
\w: [A-Za-z0-9] 匹配一个可以组成变量名的字符;\W:[^\w] 类似于匹配一个所有符号的字符
此时上面的匹配电话号码就可以简化为/^1\d\d\d\d\d\d\d\d\d\d$/.test(18136225555) true
此时我们虽然简化了部分的代码;但是看起来依旧很繁琐,这时候我们就需要用到量词了;
5.量词的使用
出现的次数eg:
{m,n}:表示出现m到n次
*: 表示出现或者不出现都可以类似于 {0,}
?:表示出现0次或者1次{0,1}
+:表示至少出现一次{1,}
此时我们再次简化以上代码
/^1\d{10}$/.test('18136225555');这样看起来是不是简单多了?
6.转义符的使用
转义符表示需要匹配的字符是元字符,这时就需要转义了
eg:
/\/\/./.test('//.') true;这时匹配了'//.'
/\/\/./.test('//a') true;这时返回的还是true,原因是这时的.没有用到转义字符,在元字符中.表示匹配任意一个字符;所以需要注意这一点
7.多选分支
多选分支表示或,有点类似于之前介绍的字符类[123]
/1|2|3/ === [123];但是通常情况下多学分支要比字符类使用场景多;
8.捕获
() : 捕获;括号捕获到的内容会保存下来以供使用;
(?:) : 不捕获;
合理的使用捕获,见少空间的使用,避免影响性能;
常见的用法eg:
1.提取 match
var data = 'aaa.bbb/ccc';
var reg = /^([a-z]*)\.([a-z]*)\/([a-z]*)$/;
var arr = data.match(reg);
console.log(arr);["aaa.bbb/ccc", "aaa", "bbb", "ccc", index: 0, input: "aaa.bbb/ccc"];
此时,我们将所捕获的内容保存在了一个数组里;
2.替换 replace
var data = 'a123213b';
var str = data.replace(/([a-z]+)/,'$1=');
console.log(str);返回值为'a=123213b';姿势我们发现仅仅替换了一个;这时我们就需要用到global全局了
此时修改为:
var str = data.replace(/([a-z]+)/g,'$1=');
此时的返回值为‘a=123213b=’;
最后还有个技巧要告诉大家
上面所用的到都是直接使用 // 来正则匹配,缺没有使用构造函数RegExp();
首先是因为常量形式语法简单,而且执行效率也高,所以构造函数就没有使用场景了吗;
构造函数RegExp()有时常用语动态的定义正则表达式
eg:
var name = "nemo";
var namePattern = new RegExp("\\b(?:"+name+"\\b)" , "ig") //这里的i用来表示不区分大小写;/b用来表示单词边界,也就是单词与单词直接分割
var matches = someText.match(namePattern);
至此,我估计你再也不用一到正则就百度了;