如何使用javascript的正则表达式

在日常工作中难免会用到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);


至此,我估计你再也不用一到正则就百度了;


如何使用javascript的正则表达式_第1张图片
哈哈哈,我知道肯定没人会扫的

你可能感兴趣的:(如何使用javascript的正则表达式)