首页>前端教程>JavaScript教程

正则这个火星文!!!

每次学了正则没多久就忘了,大部分时候写复杂一点的正则还是依靠插件或者百度。

1、正则表达式

1.1、什么是正则表达式

正则表达式是一种字符串匹配模式。因为匹配模式语法规则复杂,所以戏称为火星文。

在 JavaScript中,正则表达式也是对象。这些模式被用于 RegExpexectest 方法, 以及 StringmatchmatchAllreplacesearchsplit 方法。

比如人类描述:“字符串中有abc”,正则表达式描述:“/abc/”。

正则表达式通常被用来检索、替换那些符合某个模式的文本。

举个栗子:

正则表达式威力:

/\d{5,11}/ 字符串中0-9连续出现5至11次

/\w+/字符串中必须是(a-z0-9的字符)

1.2、正则表达式能做什么

1、检查字符串是否合法性

i. 验证用户名  (a-z,0-9,不能全是数字,不能全是字母)

ii. 验证邮箱格式 (xxx@qq.com)

iii. 验证电话号码 (11位数字)

iv. 验证身份证  (18位 )

v. 验证QQ号码格式(5-12纯数字,第一位不能为0);

2、提取字符串中信息

i. 提取一条短信中数字

ii. 提取文件名的后缀

3、替换字符串

i. 替换字符串中的非法字符

ii. 对电话号码进行屏蔽(18520102)

2、正则表达式的使用

2.1 创建一个正则表达式

正则表达式是一种字符模式对象(RegExp)

1、new构造方式

var r = new RegExp("str");

在脚本运行过程中,用构造函数创建的正则表达式会被编译。如果正则表达式将会改变,或者它将会从用户输入等来源中动态地产生,就需要使用构造函数来创建正则表达式。

2、正则表达式字面量

var r = /str/;

使用一个正则表达式字面量,其由包含在斜杠之间的模式组成。

脚本加载后,正则表达式字面量就会被编译。当正则表达式保持不变时,使用此方法可获得更好的性能。

2.2 匹配模式的方法

使用正则表达式中的test()方法,对一个字符串进行匹配,如果模式与字符串匹配成功,返回true,否则返回false。

3、精确匹配

精确匹配:正则表达式中,出现了什么字符,那么匹配的字符串也必须出现什么字符,表示该字符必须在表达式中出现。

例如,在/box/中,有3个字符,它们表示这些字符必须在一个字符串中出现,才能匹配该模式。

一个接着一个的字符,隐式表达了“后面紧跟着”这样一个操作。所以,/box/的意思是说,“b”后面跟着“o”,“o”后面跟着“x’。

4、修饰符

使用修饰符规则匹配模式。

修饰符含义
i执行对大小写不敏感的匹配。
g执行全局匹配(查找所有匹配而非在找到第一个匹配后停止,替换、提取字符串时候有用)。
m执行多行匹配。

使用语法:

var r = /pattern/flags;
//比如:
var r = /box/g;
r.test('box active box-content'); // true

//string中的replace()方法允许正则表达式作为参数
var classname = 'box active box-content';
var r = /box/g;
classname.replace(r,'div'); // div active div-content
var str = 'I like javascript,but I don\'t like Java';
//ig这些修饰符的顺序没有关系
console.log(str.replace(/java/ig,'JAVA'));//I like JAVAscript,but I don't like JAVA

5、转义特殊字符

正则表达式中:

^  $  .  *  +  ?  =  !  :  |  \  /  (  )  [  ]  {  } 具有特殊含义,如果我们的模式中需要匹配这里的某个字符,那么使用“\特殊字符”转义, 比如"\.",这样就让"."失去了特殊含义,作为普通字符匹配。

var url = 'images/1.jpg';
var r = /\.jpg/;
console.log(r.test(url));//true

6、指定位置

模式含义
n$匹配任何以n结尾的字符串。
^n匹配任何以n开头的字符串。
(?=n)匹配任何其后紧接指定字符串 n 的字符串。
(?!n)匹配任何其后没有紧接指定字符串 n 的字符串。
//匹配以fy-开头
var str = 'fy-box box-content';
var r = /^fy-/;
console.log(r.test(str));//true

//匹配以.jpg结尾的字符串
var url = 'images/1.jpg';
var r = /\.jpg$/;
console.log(r.test(url));//true

//匹配任何字符后面跟了-content的字符串
var str = 'fy-box box-content';
var r = /(?=-content)/;
console.log(r.test(str));//true

7、匹配一类字符

很多时候,我们并不想匹配一个特定的字符,而是想匹配一个有限字符集中的某一个字符。我们可以通过将字符集放到中括号内,来指定该字符集操作符。

比如:[abc]

表示要匹配“a”“b”和“c”中的任何一个字符。

有的时候,我们想要匹配一组有限字符集以外的字符。可以通过在中括号第一个开括号的后面加一个插入符(^)来实现。比如:

[^abc]

其意义将改变为:除了“a”、”b”、“c”以外的任意字符。

另外如果想要匹配数字中的任意一个字符,可以写[0123456789],但这样写非常的麻烦,可以使用连字符来指定字符范围,可以修改为[0-9]。

当然对于字母而言也可以a-zA-Z ....

字符集含义
[abc]查找方括号之间的任何字符。
[^abc]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[a-z]查找任何从小写 a 到小写 z 的字符。
[A-Z]查找任何从大写 A 到大写 Z 的字符。
[A-z]查找任何从大写 A 到小写 z 的字符。

如果觉得字符集都还是麻烦的话,还有元字符类可以使用。

元字符含义
.
查找单个字符,除了换行和行结束符。
\w
查找单词字符。(数字 字母 下划线)。相当于 [A-Za-z0-9_]
\W查找非单词字符。相当于 [^A-Za-z0-9_]
\d
查找数字。相当于 [0-9]
\D
查找非数字字符。相当于[^0-9]
\s
查找空白字符。
\S查找非空白字符。
\b
匹配单词边界。
\B
匹配非单词边界。

8、限定字符(重复)

正则表达式的语法,可以把两位数描述成/\d\d/,四位数描述成成/ d\d\d\d/。使用这种方式非常的麻烦,如果要描述100位的数字/\d\d\d\d\d\d..../,简直要人命。

正则表达式提供了“量词”,指定字符出现的次数。

量词含义
n+匹配任何包含至少一个 n 的字符串。等价于n{1,}
n*匹配任何包含零个或多个 n 的字符串。等价于n{0,}
n?匹配任何包含零个或一个 n 的字符串。等价于 n{0,1}
n{X}匹配包含 X 个 n 的序列的字符串。
n{X,Y}匹配包含 X 或 Y 个 n 的序列的字符串。
n{X,}匹配包含至少 X 个 n 的序列的字符串。
/\d{2,4}/     //匹配2-4个数字
/\w{3}\d?/     //匹配3个单词和一个可选数字
/\s+js\s+/     //匹配前后各带一个或多个空格的字符串”js”

9、选择

字符“|”用于分隔供选择的字符。“|” 可以理解为或者的意思  。

//匹配字符串中jpg、png、gif; 字符串中只需要匹配其中一个就ok了
var re = /jpg|png|gif/; 
re.test(“xxx.jpg”);//true

10、分组

正则表达式中的圆括号有多种作用,把单独的项组合成子表达式,以便可以像处理一个独立的单元那样,用“|”、 “*”、 “+”或者“?”等来对单元内的项进行处理。

例如:/java(script)?/可以匹配字符串“java”,其后可以有“script”也可以没有。

正则表达式中,圆括号的另一个作用是在完整的模式中定义子模式。当一个正则表达式成功地和目标字符串相匹配时,可以从目标串中抽出和圆括号中的子模式相匹配的部分。

假定我们正在检索的模式是一个或多个小写字母后面跟随了一位或多位数字,则可以使用模式/[a-z]+\d+/。但假定我们真正关心的是每个匹配尾部的数字,那么如果将模式的数字部分放在括号中/[a-z]+(\d+)/,就可以从检索到的匹配中抽取数字了。

var s = “AAA8888”;//关心字符中字母后面的数字;
var re =/[a-z]+(\d+)/i;
var arr = re.exec(s); //使用exes()方法
arr[1] //88888 ; 数组中的第二个元素就是正则中(\d+)的匹配;

11、正则表达式相关的方法

方法
含义
test()检索字符串中指定的值。返回 true 或 false。
exec()
检索字符串中指定的值。返回找到的值,并确定其位置。

12、常用正则表达式

12.1校验数字的正则表达式

数字:^[0-9]*$
n位的数字:^\d{n}$
至少n位的数字:^\d{n,}$
m-n位的数字:^\d{m,n}$
零或非零开头的数字:^(0|[1-9][0-9]*)$
非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$
带1-2位小数的正数或负数:^(-)?\d+(.\d{1,2})?$
正数、负数、和小数:^(-|+)?\d+(.\d+)?$
有两位小数的正实数:^[0-9]+(.[0-9]{2})?$
有1~3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$
非零的正整数:^[1-9]\d$  或     ^+?[1-9][0-9]$
非零的负整数:^-[1-9]\d*$


12.2校验字符的正则表达式

汉字:^[\u4e00-\u9fa5]{0,}$
英文和数字:^[A-Za-z0-9]+或
长度为3-20的所有字符:^.{3,20}$
由26个英文字母组成的字符串:^[A-Za-z]+$
由26个大写英文字母组成的字符串:^[A-Z]+$
由26个小写英文字母组成的字符串:^[a-z]+$
由数字和26个英文字母组成的字符串:^[A-Za-z0-9]+$
由数字、26个英文字母或者下划线组成的字符串:^\w+或
中文、英文、数字包括下划线:^[\u4E00-\u9FA5A-Za-z0-9_]+$
中文、英文、数字但不包括下划线等符号:^[\u4E00-\u9FA5A-Za-z0-9]+或
可以输入含有^%&’,;=?$\”等字符:[^%&’,;=?$\x22]+
禁止输入含有~的字符:[^~\x22]+

如果使用vscode,可以安装正则插件,使用插件帮助生成正则表达式,免除了自己写火星文的痛苦。

可以看看正则在表单验证中的使用。

点赞


0
保存到:

相关文章

发表评论:

◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。

Top